jQuery如何将onclick事件绑定到动态添加的HTML元素
jQuery如何将onclick事件绑定到动态添加的HTML元素
提问于 2009-10-06 13:40:36
我希望将onclick事件绑定到使用jQuery动态插入的元素
但它从不运行绑定的函数。如果你能指出这个例子为什么不能工作，以及我如何让它正常运行，我会很高兴：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $('<a class="" href="#">Click here to see an alert</a>');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>
编辑:我对示例进行了编辑，使其包含方法插入到的两个元素。在这种情况下，永远不会执行alert()调用。(感谢@Daff在评论中指出这一点)
回答 9
Stack Overflow用户
回答已采纳
发布于 2009-10-07 08:33:53
第一个问题是，当您在具有多个元素的jQuery集合上调用append时，将为每个元素创建一个要追加的元素的克隆，因此附加的事件观察器将丢失。
另一种方法是为每个元素创建链接：
function handler() { alert('hello'); }
$('.add_to_this').append(function() {
return $('<a>Click here</a>').click(handler);
})另一个潜在的问题可能是在将元素添加到DOM之前附加了事件观察者。我不确定这是否有什么可说的，但我认为这种行为可能被认为是不确定的。更可靠的方法可能是：
function handler() { alert('hello'); }
$('.add_to_this').each(function() {
var link = $('<a>Click here</a>');
$(this).append(link);
link.click(handler);
});Stack Overflow用户
发布于 2012-10-01 21:03:15
所有这些方法都已弃用。您应该使用on方法来解决问题。
如果您想要针对动态添加的元素，则必须使用
$(document).on('click', selector-to-your-element , function() {
//code here ....
});这将取代过时的.live()方法。
Stack Overflow用户
发布于 2009-10-06 13:53:07
Live方法怎么样？
$('.add_to_this a').live('click', function() {
alert('hello from binded function call');
});尽管如此，你所做的事情看起来应该是可行的。有一个看起来非常相似的another post。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1525664
复制相关文章
相似问题
腾讯云开发者
