如何在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（）{....}）;