“单击”事件对动态生成的元素不起作用

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });   

            $(".test").click(function(){
                alert();
            });
        });

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

我试图通过单击按钮在<h2>中生成一个类名为test的新标记。我还定义了一个与test关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?

当前回答

你需要使用.live来工作:

$(".test").live("click", function(){
   alert();
});

或者如果你使用jquery 1.7+使用.on:

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

2011-07-12 02:06:58

其他回答

尝试.live()或.delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

您的.test元素被添加在.click()方法之后，因此它没有附加事件。Live和Delegate将事件触发器赋予检查子元素的父元素，因此之后添加的任何内容仍然有效。我认为Live将检查整个文档主体，而Delegate可以给一个元素，所以Delegate更有效。

更多信息:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

2011-07-12 02:10:09

你可以点击添加动态创建的元素。下面的例子。使用“何时”来确保完成。在我的例子中，我用类扩展抓取了一个div，添加了一个“点击查看更多”的跨度，然后使用这个跨度隐藏/显示原始的div。

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

2016-04-14 19:10:04

你需要使用.live来工作:

$(".test").live("click", function(){
   alert();
});

或者如果你使用jquery 1.7+使用.on:

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

2011-07-12 02:06:58

我正在使用表动态地添加新元素，当使用on()时，使它为我工作的唯一方法是使用一个非动态的父作为:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

这非常有用，因为要删除与on()绑定的事件，可以使用off()，而要使用一次事件，可以使用one()。

2013-05-06 06:11:54

我不能让live或委托在一个灯箱(小盒子)中的div上工作。

我成功地使用了setTimeout，以以下简单的方式:

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

2015-01-07 15:04:39

“单击”事件对动态生成的元素不起作用

推荐文章

最新文章

标签