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没有在页面加载的同时加载（后面动态插入），所以我的点击功能不会捕获事件。我该如何解决这个问题？

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()

由于元素是动态添加的，因此无法将事件直接绑定到它们。因此，您必须使用Event Delegation。

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

语法

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

Answer 3

您可以将点击事件设为“实时”，以便在将对象引入dom时附加到对象。只是改变 .click（function（）{....}）; 至 .live（'click'，function（）{....}）;

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

3 个答案: