如何在document.ready（）之后加載的HTML上使用jquery

Question

我有幾個HTML元素，由頁面上的javascript函數呈現：

<a href="#" class="test1">Test</a>
<a href="#" class="test2">Test</a>
<a href="#" class="test3">Test</a>

然后，當單擊Test時，我將使用其他JavaScript創建函數：

$(document).ready(function(){

   $( ".test1" ).click(function() {
   // Code here
   });

   $( ".test2" ).click(function() {
   // Different code here
   });

   $( ".test3" ).click(function() {
   // Different code here
   });

});

但是，由於插入的HTML不會在頁面加載的同時加載（它會在之后動態插入），因此我的click函數無法捕獲事件。 我該如何解決？

Answer 1

您需要使用委托的事件處理程序：

$(document).ready(function(){
    $(document)
        .on('click', '.test1', function() {
            // Code here
        })
        .on('click', '.test2', function() {
            // Code here
        })
        .on('click', '.test3', function() {
            // Code here
        });
});

注意，為了獲得最佳性能，應將document更改為最接近的靜態父元素，該元素在DOM加載時可用。

Answer 2

使用.on（）

由於元素是動態添加的，因此無法將事件直接綁定到它們。因此，必須使用事件委托 。

$(document).on('click', '.test', function() { //code here });

句法

$( elements ).on( events, selector, data, handler );

Answer 3

您可以將點擊事件設置為“實時”，以便在將事件引入dom時將它們附加到對象上。 只需更改.click（function（）{....}）; 到.live（'click'，function（）{....}）;