jQuery没有找到动态添加的DOM对象？

Question

我是jQuery的新手...我已经多次使用过Javascript并且非常熟悉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

问题是:你的事件处理程序是绑定的$('#menu td'),但在完成此操作时,没有tds #menu!

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