Question

所以我有一些代码，我在pageload之后向DOM添加了一个元素（下面的例子中的第二个链接）但是这个新添加的元素忽略了为它定义的所有函数。因此，对于下面的示例，我希望div中的所有链接都与测试类一起显示警报。适用于硬编码的链接，但之后添加的链接忽略它。

<html>
    <head>
        <title>SO Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div class="test">
            <a href="#" title="Test">Test Link</a>
        </div>
        <script type="text/javascript">
        <!--    
            $(document).ready(function() {

                $("div.test a").click(function() {
                    alert("click");
                    return false;
                });

                $(document.createElement("a")).attr("href","#").text("Test Link 2").appendTo("div.test");

            });
        -->
        </script>
    </body>
</html>

编辑：使用jQuery插件解决它的唯一解决方案是什么？

Answer 1

您的问题是click()将事件侦听器绑定到当前匹配集中的每个元素。这不是魔术，它不会追溯性地将事件监听器应用于您添加到DOM的新内容。您的选择是：

使用jQuery中的live events功能，正如其他人所提到的那样。
通过将点击处理程序绑定到您感兴趣的元素的一些共同祖先，然后测试您看到的每次点击的目标来确定您是否关心它，自己做类似的事情。例如：
```
$(function(){
  $("div.test").click(function(e){
    if( $(e.target).is("a") ) {
      alert("click");
      return false;
    });
  });
});
```

在将新元素添加到DOM的代码中，还将事件处理程序绑定到它们。例如：

$(document.createElement("a"))
  .attr("href","#")
  .text("Test Link 2")
  .click(function(){ alert("click"); })
  .appendTo("div.test");

Answer 2

如果您使用jquery live来处理该问题。 jquery live 将处理程序绑定到所有当前和未来匹配元素的事件（如点击）。

 $("div.test a").live("click", function(){ //change to this

});

Answer 3

您的代码可以清理干净，就像您希望的那样：

<html>
    <head>
        <title>SO Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div class="test">
            <a href="#" title="Test">Test Link</a>
        </div>
        <script type="text/javascript">
        <!--    
            $(document).ready(function() {

                $("div.test a").live('click', function() {
                    alert("click");
                    return false;
                });

                $('<a href="#">Test Link 2</a>').appendTo("div.test");

            });
        -->
        </script>
    </body>
</html>

注意：jQuery 1.9

不提供直播

如果在页面加载后添加到DOM，则忽略click（）代码的JQuery元素

3 个答案: