使用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准备好时附加,即最初页面被锁定.