<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关联的单击事件。但是这个事件不起作用。
有人能帮忙吗?
您正在使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已经存在的元素上。它不会与将来创建的元素绑定。为此，您必须使用on()创建一个“委托”绑定。
委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。
源
以下是你想要的:
Var计数器= 0;
$("按钮").click(函数(){
美元(h2)。追加(“< p class = '测试' >点击我”+(+ +计数器)+ " < / p > ")
})；
// on():
美元(h2)。On ("click"， "p.test"， function(){
警报($(这)。text ());
})；
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js " > < /脚本>
< h2 > < / h2 >
生成新的元素</button>
以上内容适用于使用jQuery 1.7+版本的用户。如果你使用的是旧版本，请参考下面之前的答案。
之前的回答:
尝试使用live():
$("button").click(function(){
$("h2").html("<p class='test'>click me</p>")
});
$(".test").live('click', function(){
alert('you clicked me!');
});
为我工作。尝试用jsFiddle。
或者用delegate()有一种新奇的方法:
$("h2").delegate("p", "click", function(){
alert('you clicked me again!');
});
更新的jsFiddle。
Jquery .on的工作可以，但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是，它在某种程度上呈现的事件不同于.hover方法。
只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:
重新注册悬停事件，因为悬停对动态创建的项目不起作用。
所以每次我创建新的/动态项目时，我都会再次添加悬停代码。完美的作品
$('#someID div:last').hover(
function() {
//...
},
function() {
//...
}
);
我不能让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());
})
}
