javascript - 使用 Jquery 选择最后一个 div 的所有子项？

Question

我正在创建一个 jQuery menu，当用户单击最后一个 .menu div 上的 .item div 时，应该在下面创建另一个 .menu div其他 .item div。然后，只有那些 div 可以被点击(如果有的话)以可能生成其他 .menu div(可能还有另一个 .item div)。

基本上，我需要 jQuery selector，它只选择最后一个 .menu div 中的所有 .item div。

我尝试了以下但没有成功:

$('.menu:last').children('.item').on("click",function(){
  $('body').append("<div class=\"menu\"><div class=\"item\"><svg><text x=\"50%\" y=\"50%\" dy=\".3em\">Vehicles</text></svg></div></div>");
});

这也不起作用:

$('.menu:last-child .item').on("click",function(){
  $('body').append("<div class=\"menu\"><div class=\"item\"><svg><text x=\"50%\" y=\"50%\" dy=\".3em\">Vehicles</text></svg></div></div>");
});

这是 html 和 css 代码的 fiddle :

http://jsfiddle.net/2ZpGe/

有什么建议吗？

Answer 1

如果你想在最后一个菜单上动态点击你必须像这样使用事件委托(delegate)

$(document).on('click','.menu:last .item',function(){
          $('body').append("<div class=\"menu\"><div class=\"item\"><svg><text x=\"50%\" y=\"50%\" dy=\".3em\">Vehicles</text></svg></div></div>");
});

DEMO