在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（）時，事件綁定不會被保留

回答

相關問題