选择Jquery的最后一个div的所有子代？

Question

我正在创建一个jQuery menu ，当用户在最后一个.menu div上单击.item div时，应在下面与其他.item div一起创建另一个.menu div。 然后，仅单击那些div（如果有的话）以生成其他.menu div（可能还有另一个.item div）。

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

我尝试了以下操作，但均未成功：

$('.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代码的小提琴：

http://jsfiddle.net/2ZpGe/

有什么建议么？

Answer 1

如果要使点击动态显示在最后一个菜单上，则必须使用这样的事件委托

$(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>");
});

演示