2

我试图在#foo 锚标记之后为新添加的锚标记（.he）附加一个点击事件。但是点击事件没有发生。我用过（.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>

4

6 回答 6

5

您必须像这样委托给静态父元素

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

//code here
});
于 2013-02-20T08:54:50.377 回答
0

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

 var $he = $("<a class='he' href='#'>asdfasdf</a>").on('click', function(){
                 alert("test");
            })
 $("#foo").after($he);
于 2013-02-20T09:02:38.750 回答
0

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

$("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");
});
于 2013-02-20T09:03:06.077 回答
0

使用事件委托

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

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

于 2013-02-20T08:55:07.123 回答
0

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

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

        $(".he").live('click', function(){
            alert("test");
        });
    });
<script>
于 2013-02-20T08:55:59.593 回答
0

您必须将以下代码放入 $("button").click 块中。

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

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

于 2013-02-20T08:57:40.147 回答