<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关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?


当前回答

你也可以使用onclick="do_something(this) "“内部元素

其他回答

你需要使用.live来工作:

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

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

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

我不能让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());
    })
}

使用委托对动态生成的内容应用事件的最佳方法。

$(document).on("eventname","selector",function(){
    // code goes here
});

你的代码现在是这样的

$(document).on("click",".test",function(){
    // code goes here
});

尝试.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/

Jquery .on的工作可以,但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是,它在某种程度上呈现的事件不同于.hover方法。

只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:

重新注册悬停事件,因为悬停对动态创建的项目不起作用。 所以每次我创建新的/动态项目时,我都会再次添加悬停代码。完美的作品

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);