javascript - 如何在 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>

然后，我有更多的 javascript 用于在单击 Test 时创建一个函数：

$(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(){ .... });