1

我是 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 找不到它自己添加的项目还是我做错了什么？

4

4 回答 4

6

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

usinglive()确保 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");
});
于 2009-07-07T04:01:50.337 回答
4

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

$("#menu td").live("click", function(){
    $("#submenu").slideDown("fast");
});
于 2009-07-07T03:07:25.797 回答
1

看起来您正在将点击事件添加到错误的元素。您正在将动态添加的 TD 添加到 id="menuTR" 的元素中，但您正在为 id="menu" 的后代的 TD 元素设置点击事件

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

于 2009-07-07T03:09:01.783 回答
0

那是因为你必须在它们被创建后重新应用点击功能：

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

    });
于 2009-07-07T04:08:52.570 回答