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

I am very new at jQuery ... I've used Javascript many times and am quite familiar with DOM manipulation but simply not the API or gears of jQuery.

我是jQuery的新手...我已经多次使用过Javascript并且非常熟悉DOM操作,但根本不是jQuery的API或齿轮。

I am dynamically adding DOM elements via a JSON call like so:

我通过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");
        });
    });

If the TD items are on the page manually the click function slideDown works perfectly ... if I use the above code to dynamically add the TD items then the click function slideDown does not fire.

如果TD项目在页面上手动点击功能slideDown工作正常...如果我使用上面的代码动态添加TD项目,则单击功能slideDown不会触发。

jQuery cannot find it's own added items or am I doing something wrong?

jQuery找不到它自己添加的项目或者我做错了什么?

4 个解决方案

#1

Take a look at jQuery live. This will let you bind events to dynamically added items.

看看jQuery live。这将允许您将事件绑定到动态添加的项目。

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

#2

the problem is: your event handler is bound to $('#menu td'), but at the time that this is done, there are no tds in the #menu!

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

using live() makes sure that jquery adds event handlers to objects added later on to the DOM.

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

Alternatively, a solution used in older jquery versions would be:

或者,旧的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");
    });

#3

It looks like you're adding the click event to the wrong elements. You're adding the dynamically added TDs to an element with id="menuTR", but you're setting the click event on TD elements that are descendants of id="menu"

看起来您正在将click事件添加到错误的元素中。您将动态添加的TD添加到id =“menuTR”的元素,但是您要在作为id =“menu”的后代的TD元素上设置click事件

To test, try changing $("#menu td") to $("#menuTR td"), or vice versa. Alternately, you could try selecting the elements with $("td.menuItem"), which selects all TD elements with a class of menuItem.

要进行测试,请尝试将$(“#menu td”)更改为$(“#menuTR td”),反之亦然。或者,您可以尝试使用$(“td.menuItem”)选择元素,该元素选择具有menuItem类的所有TD元素。

#4

That is because you have to reapply the click functionality to them after they are created:

这是因为您必须在创建后重新应用点击功能:

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

    });

#1