From the manual：

Question

我正在整理一个＆＃34; FAQ＆＃34;页面的类型，我的代码不适用于看似没有理由的东西。基本上，每当我尝试在.getJSON调用之外引用任何ID时，它都不起作用。我对段落的点击事件甚至拒绝触发（警报不会弹出）。我做错了什么！

$(document).ready(function () {
$.getJSON("samp.json", function(result) {
    for(i=0;i<result.length;i++){
        var textField = $('<p />').appendTo('body');
        qaDiv = $('<div />').appendTo('body');
        textField.attr("id", result[i].categoryTitle);
        textField.text(result[i].categoryTitle);
        qaDiv.attr('id', result[i].categoryTitle + "qa");

        for(i2=0;i2<result[i].qaArray.length;i2++){
            var qa = $('<p />').appendTo(qaDiv);
            qa.html(result[i].qaArray[i2].question + "</br>" + result[i].qaArray[i2].answer);
        }
    }
});

$("p").click(function () {
    alert("sfsd");
    $("#Moviesqa").slideUp();
});
});

Answer 1

这是SO上非常常见的问题。问题是您在DOM创建点分配了click事件，然后在加载后向DOM添加更多元素，因此那些click处理程序不会监听新的。

您应该使用on代替，它会侦听原始DOM创建点：

$(document).on('click', 'p', function() {
    alert('hello world!');
    $('#Moviesqa').slideUp();
});

注意：您在第一个参数中指定的元素（此处为document）可以帮助您缩小允许执行事件处理程序的位置，例如，您可以为某个特定处理程序指定一个单击处理程序仅限div - 并且在该div中单击的p个标记将附加到事件侦听器。

From the manual：

除了能够处理尚未创建的后代元素上的事件之外，委派事件的另一个优点是，当必须监视许多元素时，它们可能会有更低的开销。在其tbody中包含1,000行的数据表中，此示例将处理程序附加到1,000个元素：
$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});
委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒出一个级别（从点击的tr到tbody）：
$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

Answer 2

在将元素放入DOM之前，您将事件与元素绑定在一起。因此，您需要将事件委托给<body>标记，该标记是静态存在的。

$("body").on("click", "p", function () {
    alert("sfsd");
    $("#Moviesqa").slideUp();
});

点击事件处理程序无效？

2 个答案:

From the manual：