在jQuery中斷開連接JavaScript replaceWith（）

在我當前創建的應用程序中，我正在對服務器執行幾次AJAX調用，並用部分視圖替換部分頁面。除了使用jQuery replaceWith()函數「替換」我的按鈕外，一切似乎都正常。在jQuery中斷開連接JavaScript replaceWith（）

在我的實際代碼中，我將更換整個<div>不只是一個按鈕，但代碼found here將有助於說明我的問題。

單擊按鈕時，調用JavaScript，因此該按鈕隨即更新。但是，嘗試再次單擊該按鈕，將不會調用或執行相同的JavaScript。這裏有一些斷開，我錯過了。（在我看來，每次點擊帶有「updateButton」類的按鈕時，都應該執行javascript）。請幫助我。

謝謝

來源

2012-07-27 KWondra

事件代表團。

$(document).on('click','.updateButton',function (e) { 
      e.preventDefault(); 
    var now = new Date().getTime(); 

    var newButton = "<span class='btn btn-info updateButton'>Update Button " + now + "</span>" 

    $(this).replaceWith(newButton); 
});

演示：http://jsfiddle.net/D2RLR/896/

代替結合該事件，其中將被刪除（因此丟失事件綁定）按鈕，將其綁定到不得到移除，但一個元件是的祖先那個按鈕。

來源

2012-07-27 19:55:10

完美！謝謝！ – KWondra 2012-07-27 19:59:43

另外，只需要一個小記錄，你可以用'$ .now（）'代替'new Date（）。getTime（）' – 2012-07-27 20:00:35

@KevinB：或'Date.now（）'，等等，這個更短。 :-P – 2012-07-27 20:17:15

而不是綁定文檔上的事件處理程序（如凱文B的答案），只需將其重新綁定到您創建的新按鈕來替換舊按鈕。這是一種更有效的事件處理方法，因爲在事件觸發之前，事件不需要將DOM樹一路上升到文檔。

http://jsfiddle.net/D2RLR/900/

var replaceBtn = function(domBtn,e) { 
    e.preventDefault(); 
    var now = new Date().getTime(); 

    var newButton = $("<span class='btn btn-info updateButton'>Update Button " + now + "</span>"); 
    newButton.on('click',function(event) { 
     replaceBtn(this,event); 
    }); 

    $(domBtn).replaceWith(newButton); 

} 

$('.updateButton').click(function(event) { 
    replaceBtn(this,event) 
});

來源

2012-07-27 20:00:36

在jQuery中斷開連接JavaScript replaceWith（）

回答

相關問題