如果在页面加载后添加到 DOM，则 JQuery 元素会忽略 click() 代码答案

【问题标题】：JQuery elements ignoring click() code if added to DOM after pageload如果在页面加载后添加到 DOM，则 JQuery 元素会忽略 click() 代码
【发布时间】：2009-10-15 19:20:08
【问题描述】：

所以我有一些代码，我在页面加载后向 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 插件将其抽象出来的唯一解决方案吗？

【问题讨论】：

如果您在项目中使用 jQuery 1.2.6，您将需要一个名为 liveQuery docs.jquery.com/Plugins/livequery 的插件，但它是 jQuery 1.3.2 中内置的

标签： jquery dom

【解决方案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");

【讨论】：

接受，因为我认为你涵盖了我所有的选择

【解决方案2】：

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

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

});

【讨论】：

如果您使用 jQuery 1.2.6 或更早版本，您仍然可以通过使用名为 liveQuery docs.jquery.com/Plugins/livequery的插件获得相同的功能

【解决方案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 不提供直播

【讨论】：

只有在页面上没有其他链接的情况下才能以相同的方式工作，我认为很明显我简化了一个例子......
所以缩小你的选择器。它仅适用于您的
中添加的任何链接。
我不想复制链接，我想从头开始创建一个新链接，因此我希望我的代码能够反映这一点
.live() 背后的想法是它向文档添加了一个永远不会更改的事件侦听器，并且通过事件委托，它仅在单击选择器或指定任何其他事件时触发