代码之家 › 专栏 › 技术社区 › Andrew G. Johnson

jquery元素忽略click()代码(如果在pageload之后添加到dom中)

dom jquery

Andrew G. Johnson · 技术社区 · 15 年前

所以我有一些代码,在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插件抽象它的唯一解决方案吗?

3 回复 | 直到 8 年前

Sixten Otto 15 年前

你的问题是 click() 将事件侦听器绑定到当前匹配集中的每个元素。这不是魔法,也不会将事件监听器追溯到添加到DOM中的新内容。您的选择是:

使用 live events jquery中的功能,正如其他人所提到的。
通过将一个单击处理程序绑定到您感兴趣的元素的某个共同祖先,然后测试您看到的每个单击的目标,以确定您是否关心它,您可以自己做一些类似的事情。例如:
```
$(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");

TStamper 15 年前

如果你使用 jquery live 这将解决这个问题。 现场直播 将处理程序绑定到所有当前和将来匹配的元素的事件(如单击)。

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

});

cacti5 8 年前

您的代码可以被清除,并像您希望的那样:

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

注意:Live在上不可用 jQuery 1.9