jQuery找不到动态添加的DOM对象吗？

Question

我是jQuery的新手，我已经使用Java脚本很多次了，并且对DOM操作非常熟悉，但对jQuery的API或工具却不是很熟悉。

我正在像这样通过JSON调用动态添加DOM元素：

$(document).ready(function() {
        var url = "jsonMenuItems.js";
        $.getJSON(url, null, function(data) {
            var html = "";
            //alert(data.items);
            data = data.items;
            for (var key in data) {      
                html += "<td class=\"menuItem\"><span>" + data[key].name + "</span></td>";
            };
            $("#menuTR").html(html);
        });

        var lZeroArray = $("#menu td");
        lZeroArray.click(function() {
            $("#submenu").slideDown("fast");
        });
    });

如果TD项目位于手动页面上，则单击功能slideDown可以正常工作……如果我使用上述代码动态添加TD项目，则单击功能slideDown不会触发。

jQuery无法找到它自己添加的项目，或者我做错了什么？

Answer 1

看看jQuery live。这将使您可以将事件绑定到动态添加的项目。

$("#menu td").live("click", function(){
    $("#submenu").slideDown("fast");
});

Answer 2

问题是：您的事件处理程序已绑定到$('#menu td')，但是在完成此操作时，td中没有#menu！

使用live()确保jquery将事件处理程序添加到稍后添加到DOM的对象中。

或者，较旧的jQuery版本中使用的解决方案是：

var url = "jsonMenuItems.js";
$.getJSON(url, null, function(data) {
  var html = "";
  //alert(data.items);
  data = data.items;
  for (var key in data) {
    html += "<td class=\"menuItem\"><span>" + data[key].name + "</span></td>";
  };
  $("#menuTR").html(html);
  $("#menu td").click(function() {
    $("#submenu").slideDown("fast");
  });
});
var lZeroArray = $("#menu td");
lZeroArray.click(function() {
  $("#submenu").slideDown("fast");
});

Answer 3

似乎您将click事件添加到了错误的元素。您要将动态添加的TD添加到id =“ menuTR”的元素中，但要对id =“ menu”后代的TD元素设置click事件

要进行测试，请尝试将$（“＃menu td”）更改为$（“＃menuTR td”），反之亦然。或者，您可以尝试选择带有$（“ td.menuItem”）的元素，该元素选择所有带有menuItem类的TD元素。

Answer 4

这是因为在创建它们之后，您必须将点击功能重新应用于它们：