1

我有一页用户评论。

$(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>

然后此响应在特定 div 之后插入内容，该 div 包含 mysql 表中的第一条评论

像这样：

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

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

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

});

});

好的，正如我所说的那样完美。但是这种方法：

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

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

哪里有问题？

4

2 回答 2

1

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

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

随着新元素的出现，它们会为你绑定。唯一的其他解决方案是不断地将处理程序绑定到新元素，因为它们从服务器响应中下降。放轻松，坐下来，让 jQuery 完成繁重的工作。

于 2012-04-25T01:27:32.810 回答
1

您需要使用.on()withselector参数（第二个参数）：

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

来自文档：

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

于 2012-04-25T01:31:39.173 回答