如何重新初始化已從DOM中刪除的按鈕？

所以我遇到了一個問題，使用名爲XCrud的程序，它應該有助於數據庫管理。問題的關鍵在於程序刪除並重新將其按鈕插入到DOM中，導致JQuery中的點擊功能停止工作。如何重新初始化已從DOM中刪除的按鈕？

$('a[class="btn btn-warning xcrud-action"]').on('click', function() { 
intvId = window.setInterval(cleanup, 200); 
});

此按鈕應該重置幫助用戶沿數據庫工作流程的時間間隔，但如前所述，按鈕只會觸發一次。

感謝大家的幫助

來源

2016-07-22 Joel Hines

您是否有被刪除並重新插入的標記代碼？ – mhatch

使用此語法代替，委派事件處理程序類，現在和將來的所有成員：

$('parent').on('click', 'a.btn.btn-warning.xcrud-action', function() { 
    intvId = window.setInterval(cleanup, 200); 
});

凡父是一個元素上漲在DOM樹中，而不是您要定位的a元素。（我假設這個選擇器中的示例中的所有類都適用於單個a元素。）該語法取代了較早的delegate方法。

問題是，您正在將處理程序附加到不會來來去去的元素（不管DOM多麼易變，如果必須的話，您總是可以使用document），並應用一個過濾器（以選擇器的形式）到元素，只將處理程序應用於所需的包含元素的類型。正如doc所述：

委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。

不幸的是，美國商務部也沒有拼出了[selector]參數的on方法委託處理程序，以在選擇的類成員。您可以通過查看較早的delegate文檔並查看他們將從delegate轉換爲on的示例來查找。

這裏有一個小的工作例如：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title> 
     Test 
    </title> 

    <!--jQuery and jQuery-UI files--> 
    <script src="includes/jquery/jquery-2.2.3.js"></script>  
    <script src="includes/jquery-ui/external/jquery/jquery.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('form').on('click', 'button.test1.test2', function(e, ui){ 
       $('form').append('<button type="button" class="test1 test2">"Test"</button>') 
       alert('click'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form> 
    <button type="button" class="test1 test2">Test</button> 
</form> 
</body> 
</html>

任何新的按鈕將具有相同的行爲與原。

來源

2016-07-22 15:21:00 BobRodes

謝謝你的答案，它背後的邏輯解決了我的問題。最後，我必須定位父母的父母，但它是有效的。再次感謝。 –

不客氣。你永遠不知道一些插件會給你帶來什麼樣的不幸，作爲它提供的功能的價格，是嗎？ :) – BobRodes

如何重新初始化已從DOM中刪除的按鈕？

回答

相關問題