如果在pageload之后将JQuery元素添加到DOM，则忽略click（）代码_Jquery_Dom

如果在pageload之后将JQuery元素添加到DOM，则忽略click（）代码

jquery dom

如果在pageload之后将JQuery元素添加到DOM，则忽略click（）代码,jquery,dom,Jquery,Dom,因此，我有一些代码，在pageload之后向DOM添加了一个元素（下面示例中的第二个链接），但是这个新添加的元素忽略了为它定义的所有函数。因此，对于下面的示例，我希望div中带有测试类的所有链接都显示警报。对于硬编码的链接可以正常工作，但之后添加的链接会忽略它 <html> <head> <title>SO Test</title> <script type="text/javascript" src=

因此，我有一些代码，在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插件将其抽象出来的唯一解决方案吗？

您的代码可以被清理，并像您希望的那样：

<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 live将处理程序绑定到所有当前和未来匹配元素的事件（如单击）

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

});

您的问题是

click（）

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

正如其他人所提到的，使用jQuery中的功能

您自己也可以做类似的事情，将单击处理程序绑定到您感兴趣的元素的某个公共祖先，然后测试每次单击的目标，以确定您是否关心它。例如：

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

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

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

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

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

假设页面上没有任何其他链接，这也只能以同样的方式工作，我想很明显，我简化了一个示例…所以缩小您的选择器。它将只适用于在您的中添加的任何链接。我不是试图复制链接，而是试图从头开始创建一个新链接，因此我希望我的代码能够反映这一点

.live（）

背后的想法是它向文档添加了一个永不更改的事件侦听器，如果使用jQuery 1.2.6或更早版本，则只有在单击所选选择器或指定任何其他事件时才会触发事件委派。如果在项目中使用jQuery 1.2.6，则需要名为liveQuery docs.jQuery.com/Plugins/liveQuery的插件，但它是内置jQuery 1.3.2已接受，因为我认为您涵盖了我的所有选项