在jQuery中执行.replaceWith()时，不会保留事件绑定

Question

这里有一个浓缩的例子。

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

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

上面成功回调中的"data"将替换整个.contatordiv，包括child.chat回复按钮。此replaceWith（）之后，单击事件不再绑定到按钮。

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

Answer 1

Grab jquery 1.7现在使用"on"绑定：http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

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

DOM更改后，要替换的旧api与活动类型事件处理程序绑定。

这个$（选择器）.live（事件，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!
});

使用各种选项来选择所需的对象。

Answer 2

在您的点击处理程序中，使用.on（）作为委托，而不是

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

该事件将"冒泡"到容器中，如果它与聊天回放匹配，就会触发。

Answer 3

决定采用一个不那么优雅的解决方案，部分原因是这篇文章：使用替换后未注册事件

我创建了一个名为wireUpChatReply（）的函数，它将点击事件绑定到.chat回复按钮。

然后在replaceWith（）之后，我调用wireUpChatReply（）来重新绑定事件。我在document.ready.上给wireUpChatReply打了同样的电话

它不漂亮，但很管用。

Answer 4

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

您可以执行以下操作，而不是重新绑定事件（在这种情况下，您需要知道已经绑定的事件）：

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

或者，如果有几个容器：

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