將點擊事件綁定到通過AJAX加載而未授權的內容？

Question

我有一種情況，我使用data屬性data-command在整個網站的特定部分的許多情況下，而不是綁定噸的單獨的點擊事件，我決定只使用一個，並使用一個開關，如：

$('[data-command]').on('click', function(event) { 

    // Prevent default click action 
    event.preventDefault(); 

    // Get command 
    var command = $(event.target).data('command'); 

    switch (command) { 
     // Do stuff... 
    } 

    // Prevent default click action (IE 8) 
    return false; 

}); 

然而，它試圖讓它在通過AJAX加載的數據上工作時就成了一個問題。

這顯然工程..

$('#existing_element').on('click', '[data-command]', function(event) { 

...但因爲它應該是在該網站上面也不會在所有頁面上工作的那一段許多不同的網頁。

我可以只要確保給出具體id的地方，我加載我所有的Ajax數據父包裝，但是這將意味着到兩個獨立的結合事件與一羣相同的代碼。

我也可以這樣做是爲了覆蓋所有基地..

$(document).on('click', '[data-command]', function(event) { 

...但是這可能不是個明智的想法結合到文檔中的元素。

編輯： Html數據通過jQuery的html方法被加載到DOM。

任何乾淨我可以處理這個或我應該創建兩個不同的綁定事件來處理每種情況？

Answer 1

事件委託是在動態創建的元素上綁定事件的最佳方法。由於您不想使用事件委託，因此請使用以下方法來綁定事件。

$('[data-command]').off('click').on('click', clickHandler); 

// Somewhere in the same scope 
function clickHandler(e) { 
    // Handle click event here 
} 

在使用html()添加動態創建的元素後添加此項。

off('click')將首先解除之前應用的點擊事件處理程序，然後on('click',將綁定與選擇器匹配的所有元素上的點擊處理程序。

---

編輯

這似乎是一次又一次地重複相同的代碼。我不能保持乾爽嗎？

是的，你可以通過創建一個函數來綁定事件並在你想綁定事件時調用相同的函數來保持代碼乾淨和乾淨。

function clickHandler(e) { 
    // Handle click event here 
} 

function bindEvent() { 
    $('[data-command]').off('click').on('click', clickHandler); 
} 

$(document).ready(bindEvent); 

... 

$.ajax({ 
    ... 
    success: bindEvent 
....