如何添加一個類到Jquery中的元素，然後基於該類觸發事件

Question

我有一些jQuery代碼，它在編寫文檔就緒時以編程方式向元素添加一個類。我遇到的問題是如何監聽被點擊的類的元素。

<li><a href="#" id="btnDeleteGroup" class="disabled">Delete Node</a></li> 

$(document).ready(function() { 

    $('a.deleteGroup').click(function (e) { 
    alert("deleteGroup"); 
    }); 

    $('#btnDeleteGroup').removeClass("disabled"); 
    $('#btnDeleteGroup').addClass("deleteGroup"); 

}); 

Answer 1

你需要使用on：

$(document).ready(function() { 

    $(document).on('click', 'a.deleteGroup', (function (e) { 
    alert("deleteGroup"); 
    }); 

    $('#btnDeleteGroup').removeClass("disabled"); 
    $('#btnDeleteGroup').addClass("deleteGroup"); 

}); 

此結合事件的文件，然後「偵聽」您選擇。優先將它與document更具體地綁定，以提高性能，即a標籤容器。

只是爲了解釋一下，如果你將它綁定到文檔上，它將「監聽」發生在文檔上的每一個點擊事件，然後說「這與我的選擇器匹配」。如果將它綁定到容器上，它只會捕獲該容器上的點擊事件，因此它不得不處理更少的請求，因此效率更高。

另外on是在Jquery 1.7中引入的，如果你使用的是舊版本，它們的效率會低一些，比如live。如果你使用1.7或更新版本，儘管使用on。

Answer 2

爲

$(document).on("click", "a.deleteGroup", function (e) { 
    alert("deleteGroup"); 
}); 

使用.on而且最好是結合事件不記錄，但該鏈接的一些父元素。

Answer 3

jQuery無法偵聽在偵聽器綁定後添加的元素。爲了解決您的問題，您只需要重新整理您的代碼：

$(document).ready(function() { 

    $('#btnDeleteGroup').removeClass("disabled"); 
    $('#btnDeleteGroup').addClass("deleteGroup"); 

    $('a.deleteGroup').click(function(e) { 
    alert("deleteGroup"); 
    }); 

}); 

乾杯，

特倫斯