Question

我尝试在#foo锚标记之后为新添加的锚标记（.he）附加click事件。但点击事件没有发生。我用过（.on）。你能帮助我吗？ *

        <!DOCTYPE html>
        <html>
        <head>
        <title>Attaching event</title>
       <style>p { background:yellow; margin:6px 0; }</style>
       <script src="js/jquery.js"></script>
        </head>
    <body>
    <p>Hello</p>
    how are
    <p>you?</p>

    <button>Call remove() on paragraphs</button>

    <a id="foo" href="#" style="display:block">Testing the bind and unbind</a>


    <script>
        $("button").on('click',function () {

            $("#foo").after("<a class='he' href='#'>asdfasdf</a>");

        });
        $(".he").on('click', function(){
                alert("test");
        });     

    </script>
</body>

Answer 1

你必须委托一个像这样的静态父元素

$(document).on('click','.he',function(){

//code here
});

Answer 2

使用event delegation

$("body").on("click", ".he", function() {
    alert("test");
});

您可以使用body的任何静态父元素代替.he。

Answer 3

使用.live。并且不要忘记添加代码内部jquery clousure

<script>
    $(function(){
        $("button").on('click',function () {
            $("#foo").after("<a class='he' href='#'>asdfasdf</a>");
        });

        $(".he").live('click', function(){
            alert("test");
        });
    });
<script>

Answer 4

你必须将下面的代码放在$（“按钮”）中。点击阻止。

  $(".he").on('click', function(){
                    alert("test");
            });

jsfiddle的链接http://jsfiddle.net/wbWLE/

Answer 5

您可以将click事件绑定到锚点，然后将其附加到DOM，如下所示：

 var $he = $("<a class='he' href='#'>asdfasdf</a>").on('click', function(){
                 alert("test");
            })
 $("#foo").after($he);

Answer 6

您可以在将锚点附加到文档之前直接将处理程序附加到锚点：

$("button").on('click',function () {
   $("<a class='he' href='#'>asdfasdf</a>")
      .on('click', function(){
         alert("test");
      })
      .insertAfter("#foo");
});

或绑定文档上的委托处理程序，该处理程序将捕获以he为其类的锚点的所有点击：

$(document).on('click', 'a.he', function() {
   alert("test");
});
$("button").on('click',function () {
   $("<a class='he' href='#'>asdfasdf</a>").insertAfter("#foo");
});

如何使用jquery将事件附加到新添加的锚点

6 个答案: