jQuery如何将onclick事件绑定到动态添加的HTML元素
我想将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()永远不会执行该调用。
问题答案：
第一个问题是，当您在具有多个元素的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);
});
-
本文向大家介绍jquery html动态添加的元素绑定事件详解，包括了jquery html动态添加的元素绑定事件详解的使用技巧和注意事项，需要的朋友参考一下 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况： 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 以上这篇jquery html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考
-
问题内容： 我使用jquery fancybox 1.3.4作为弹出表单。 但是我发现fancybox无法绑定到动态添加的元素。例如，当我向当前文档中添加html元素时。 像这样：首先我使用jquery将一个元素附加到主体， 我叫fancybox， 但fancybox不适用于动态添加的元素。 我不能从此元素调用fancybox吗？ 问题答案： 将fancybox（v1.3.x）绑定到动态添加的元素
-
本文向大家介绍jQuery给动态添加的元素绑定事件的方法，包括了jQuery给动态添加的元素绑定事件的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用l
-
问题内容： 我在SVG教程中找到了此示例，该教程说明了如何将事件处理程序用于SVG元素。看起来像下面的代码： 但是，这似乎不起作用。当我单击该元素时，没有任何反应。 也许重要的是要提到我正在使用PHP从PHP脚本内部显示SVG的事实。另外，请注意，使用AJAX和将PHP脚本生成的内容带入页面。 这可能与它有关吗？非常感谢您的帮助。 问题答案： 似乎所有JavaScript都必须包含在SVG中才能运
-
问题内容： 假设我有一些jQuery代码，将事件处理程序附加到class所有元素。 例如： 我的HTML可能如下所示： 没问题。但是，请考虑是否在以后的某个时间将元素写入页面。 例如： 在这种情况下，当用户单击时将创建链接。 该链接不具备与之关联的处理程序，即使它有。 基本上，我想编写一次处理程序，并将其应用于页面加载时出现的内容以及以后通过 AJAX / DHTML 引入的内容。知道我该如何解决
-
问题内容： 我正在上传多个图像，并将它们放置在ondiv必须切换某些类的某些div中。我是否必须将添加onclick事件的部分放在ajax成功函数中？非常感谢！ 我正在使用“ on”上的jquery，但似乎不起作用。可能我缺少了一些东西 这是我的代码： Javascript： HTML： 问题答案： 对于动态创建的元素，您必须使用.live（）但是，在1.7中不推荐使用，而在中将其完全删除。该签名