使用 jQuery 选择动态创建的元素

Question

试图解决这个问题，我想我知道问题所在，但我不知道如何解决它。当我的页面第一次加载时，我使用 JSON 文件在页面上提供一些链接，使用 $.getJSON 动态创建它们并为它们提供 ID。我的代码是（这只是我现在感兴趣的一点，我当然关闭了函数）：

    $(function() {

        $.getJSON("data.json", function(data) {
            var navOutput = "";
            for (var key in data.navigation) {
                navOutput += '<li><a id="' + key + '">' + data.navigation[key] + '</a></li>'; // Create list items with ID 'key'
            }
            $("#mainNav").html(navOutput);

页面上的所有内容都可以正常加载。在 $.getJSON 函数之外，我试图将事件侦听器分配给其中一个动态创建的 ID，例如：

$("#cast").click(function() {
    alert("Testing");
}); //click function

这似乎不起作用。对此可能有一个简单的答案，但我无法弄清楚。如果我将事件处理程序分配给在 HTML 中创建的页面上的 ID，它会起作用，因此它与这些动态 ID 有关。任何帮助将不胜感激。

Answer 1

改变

$("#cast").click(function() {
    alert("Testing");
}); 

到

$("body").on("click","#cast",function(e) {
    alert("Testing");
}); 

您需要使用on 而不是click 设置处理程序。升级到live()。它允许您将处理程序附加到动态加载的元素。 click 将仅附加在 dom 就绪时，即在页面最初加载时。