<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关联的单击事件。但是这个事件不起作用。
有人能帮忙吗?
原因:
在jQuery中，Click()事件直接绑定，仅当特定元素(Html代码)存在于页面(页面加载后)时，将事件处理程序附加到元素上。
动态元素是在javascript或jquery的帮助下创建的(不是在Html中)。
它不会考虑页面加载后创建的未来元素(Dynamic)。
因此，正常的单击事件不会在动态元素上触发。
解决方案:
为了克服这个问题，我们应该使用on()函数。On()可以为当前元素和未来元素委托事件。
委托事件的优点是可以将处理程序附加到将来要添加到文档中的元素。
注意:delegate()，live()和on()函数比DOM元素更有优势。从JQuery 1.7开始，delegate()和live()已弃用(不要使用它们)。
可以同时为当前和未来的元素委托事件。
你的代码应该是这样的
从$(document).ready中删除代码:
$(".test").click(function(){
alert();
});
改变为:
$(document).on('click','.test',function(){
alert('Clicked');
});
原因:
在jQuery中，Click()事件直接绑定，仅当特定元素(Html代码)存在于页面(页面加载后)时，将事件处理程序附加到元素上。
动态元素是在javascript或jquery的帮助下创建的(不是在Html中)。
它不会考虑页面加载后创建的未来元素(Dynamic)。
因此，正常的单击事件不会在动态元素上触发。
解决方案:
为了克服这个问题，我们应该使用on()函数。On()可以为当前元素和未来元素委托事件。
委托事件的优点是可以将处理程序附加到将来要添加到文档中的元素。
注意:delegate()，live()和on()函数比DOM元素更有优势。从JQuery 1.7开始，delegate()和live()已弃用(不要使用它们)。
可以同时为当前和未来的元素委托事件。
你的代码应该是这样的
从$(document).ready中删除代码:
$(".test").click(function(){
alert();
});
改变为:
$(document).on('click','.test',function(){
alert('Clicked');
});
如果你有一个动态添加到某个容器或主体的链接:
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);
};
}
Jquery .on的工作可以，但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是，它在某种程度上呈现的事件不同于.hover方法。
只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:
重新注册悬停事件，因为悬停对动态创建的项目不起作用。
所以每次我创建新的/动态项目时，我都会再次添加悬停代码。完美的作品
$('#someID div:last').hover(
function() {
//...
},
function() {
//...
}
);
