在jQuery中执行.replaceWith（）时，事件绑定不会被保留

下面是一个精简的例子。在jQuery中执行.replaceWith（）时，事件绑定不会被保留

请记住，.chat-reply类具有绑定到它的单击事件处理程序。

的HTML（回复按钮）：当有人点击另一个按钮将消息发送到服务器保存在数据库

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

这个jQuery函数被调用。这通过ajax完成并且成功完成。在上述阿贾克斯（）成功（）回调调用此函数：

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

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

在成功回调的“数据”上面会取代整个 .container DIV包括孩子.chat回复按钮。在replaceWith（）之后，click事件不再绑定到按钮。从逻辑上讲，我试图让最终用户在时间轴上发布消息，然后在时间轴中显示该消息，而不需要刷新屏幕。

来源

2012-02-14 generalopinion

部分决定一个相当不那么优雅的解决方案由于对这个帖子：Events not registering after replaceWith

我创建了一个名为wireUpChatReply（）函数结合click事件到.chat回复按钮。

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

这不是很漂亮，但它的工作原理。

来源

2012-02-14 03:56:29 generalopinion

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

或者，如果< 1.7使用“活”，而不是“绑定”，因为它会寻找DOM变化和重新申请的变更内容的事件。如果不是，您可以在回调中重新应用该事件。

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

这 $（选择）.live（事件，FN）

成为该的$（document）。在（活动，选择，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-14 03:12:34

你代码示例对我来说有点困惑。如果你不介意澄清一点，那会很棒。 – generalopinion 2012-02-14 03:37:14

Sry the block只是从旧的'live'指向'on'，但Vigrond的例子是你如何做'开'。在您的回调中收到html之后附加事件几乎会更好。 – 2012-02-14 05:17:23

在您单击处理程序，使用。对（）作为一个代表，而不是

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

本次活动将“泡沫”高达容器，如果a.chat重播匹配就会触发。

来源

2012-02-14 03:13:09 Vigrond

一旦我做了一个replaceWith（），“冒泡”就起作用了，但那些事件绑定已经消失了。当然是 – generalopinion 2012-02-14 03:33:52

。我的坏，replaceWith将取代整个元素。您可以改为使用.html（内容）吗？这将取代它的内容，而不是.container元素。否则，您将不得不开始查看.container的祖先以将.on事件处理程序附加到。 – Vigrond 2012-02-14 03:38:38

Ewww。这可能会变得讨厌。我发现了另一篇文章，建议有一个“连接”事件绑定的功能。然后在replaceWith（）之后再次调用它。这不是很好，但我可能没有太多的选择。 – generalopinion 2012-02-14 03:42:07

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

而是重新绑定的事件，在这种情况下，你需要知道的已经绑定的事件，你可以做到以下几点：

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

，或者，如果有几个容器：

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

来源

2018-01-11 13:18:37 RiZKiT

在jQuery中执行.replaceWith（）时，事件绑定不会被保留

回答

相关问题