Question

我有一页用户评论。

$(p).click(function(){

    $(this).hide(200);
});

当用户点击某些评论时，这个评论通常会消失。好的，它完美无缺。

但是当用户对服务器响应做同样的事情时，这不再起作用了

服务器响应是表中的一堆下一条注释（即自定义AJAX分页器）

服务器响应如下所示：

<p id="next-id1">bla bla bla 1</p>
<p id="next-id2">bla bla bla 2</p>

然后此响应在包含mysql表中的第一个注释的特定div之后插入内容

像这样：

$("#snow-next-btn").click(function(){

$.post('/paginator.php', {}, function(response){

    $("#comment-div").after(response);

});

});

好吧，就像我说的那样完美。但是这个方法：

$(p).click(function){
    $(this).hide(200);
}

不再适用于服务器响应（但它仍适用于页面加载时由php打印的内容）。

问题出在哪里？

Answer 1

事件处理程序尚未绑定到从服务器响应中插入的新元素。不要使用$.click()，而是使用$.on()：

$(document).on("click", "p", function(){
  $(this).hide( 200 );
});

随着新元素的出现，它们将受到你的约束。唯一的其他解决方案是在从服务器响应中插入新元素时不断地将处理程序绑定到新元素。放轻松，坐下来，让jQuery做繁重的工作。

Answer 2

您需要将.on()与selector参数（第二个参数）一起使用：

$(document).on('click', 'p', function() {
   $(this).hide(200);
})

我无法看到您的标记，因此我无法确定最接近p的父级是什么，而是将document替换为p的最近父级，例如你的标记是：

<div id="bla">
   <p>...</p>
   <p>...</p>
   <p>...</p>
</div>

你写的是

$('#bla').on('click', 'p', function() {
   $(this).hide(200);
})

来自docs：

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序。

jQuery不能按预期工作，为什么？

2 个答案: