7

这是一个精简的例子。

请记住， .chat-reply 类绑定了一个点击事件处理程序。

HTML（回复按钮）：

<div class="container">
    <a href="#" class="btn small chat-reply">Reply</a>
</div>

当有人单击另一个按钮，该按钮将消息发送到服务器以保存在数据库中时，将调用此 jQuery 函数。这是通过 ajax 完成的，并且成功完成。在前面提到的 .ajax() success() 回调中，这个函数被调用：

$.ajax({
      type      :  'GET',
      url       :  '/some_controller/some_method',
      success   :  function(data) {

      $('.container').replaceWith(data);
    }
});

上面成功回调中的“数据”将替换整个.container div，包括子 .chat-reply 按钮。在这个 replaceWith() 之后，click 事件不再绑定到按钮。

从逻辑上讲，我试图让最终用户将消息发布到时间轴，然后在时间轴中显示该消息，而无需刷新屏幕。

4

4 回答 4

3

抓取现在使用“on”绑定的 jquery 1.7：http: //blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

或者如果 < 1.7 使用 'live' 而不是 'bind' 因为它将查找 DOM 更改并重新应用更改内容的事件。如果不是，您可以在回调中重新应用该事件。

旧 api 替换为在 DOM 更改后与实时类型事件处理程序绑定。

这个 $(selector).live(events, fn)

变成这个 $(document).on(events, selector, fn)

或者在代码中

这个

$(".container a.chat-reply").live("click", function(){
 // do it live!
});

在 1.7 变成这个

$(".container").on("click", "a.chat-reply", function(event){
 // do it live!
});

使用各种选项来选择您想要的对象。

于 2012-02-14T03:12:34.237 回答
2

在您的点击处理程序中，使用 .on() 作为委托

$("div.container").on("click", "a.chat-reply", function(even){
  //click handler here
});

该事件将“冒泡”到容器，如果它与 a.chat-replay 匹配，它将触发。

于 2012-02-14T03:13:09.540 回答
1

部分由于这篇文章决定了一个相当不那么优雅的解决方案：事件在 replaceWith 之后没有注册

我创建了一个名为wireUpChatReply() 的函数，它将点击事件绑定到.chat-reply 按钮。

然后在replaceWith() 之后，我调用wireUpChatReply() 来重新绑定事件。我在 document.ready 上对wireUpChatReply 进行了同样的调用。

它不漂亮，但它有效。

于 2012-02-14T03:56:29.270 回答
0

关于实时事件的两个答案并不能解决问题，因为容器本身被替换并且事件绑定消失了。

无需重新绑定事件，在这种情况下，您需要知道已绑定的事件，您可以执行以下操作：

$(".container").parent().on("click", ".container a.chat-reply", function(){
  // do something
});

或者，如果有多个容器：

$(document.body).on("click", ".container a.chat-reply", function(){
  // do something
});
于 2018-01-11T13:18:37.577 回答