<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关联的单击事件。但是这个事件不起作用。
有人能帮忙吗?
我正在使用表动态地添加新元素，当使用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()。
另一种更简洁的方法(IMHO)是使用一个原始的javascript函数来响应一个on click事件，然后将目标元素传递回jQuery。这种方法的优点是你可以在任何地方动态地添加你的元素，点击处理程序将“正常工作”，你不需要担心把控制委托给父元素，等等。
步骤1:更新动态html以触发onclick事件。确保将'event'对象作为参数传递
$("button").click(function() {
$("h2").html("<p class='test' onclick='test(event)'> click me </p>")
});
步骤2:创建测试函数以响应单击事件
function test(e){
alert();
});
可选步骤3:鉴于您正在使用jQuery，我假设它将有用的引用返回到源按钮
function test(e){
alert();
// Get a reference to the button
// An explanation of this line is available here
var target = (e.target)? e.target : e.srcElement;
// Pass the button reference to jQuery to do jQuery magic
var $btn = $(target);
});
如果你有一个动态添加到某个容器或主体的链接:
var newLink= $("<a></a>", {
"id": "approve-ctrl",
"href": "#approve",
"class": "status-ctrl",
"data-attributes": "DATA"
}).html("Its ok").appendTo(document.body);
你可以使用它的原始javascript元素并添加一个事件监听器，比如click:
newLink.get(0).addEventListener("click", doActionFunction);
无论你添加多少次这个新的链接实例，你都可以像使用jquery点击函数一样使用它。
function doActionFunction(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).html());
}
所以你会收到一条信息说
它的好
它比其他替代方案具有更好的性能。
额外:你可以获得更好的性能避免jquery和使用纯javascript。如果你使用的是ie8版本，你应该使用这个polyfill来使用addEventListener方法
if (typeof Element.prototype.addEventListener === 'undefined') {
Element.prototype.addEventListener = function (e, callback) {
e = 'on' + e;
return this.attachEvent(e, callback);
};
}
我不能让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());
})
}
