提问人：Andrew G. Johnson 提问时间：10/16/2009 最后编辑：Andrew G. Johnson 更新时间：12/8/2016 访问量：6949
JQuery 元素忽略 click（） 代码（如果在页面加载后添加到 DOM） 中
JQuery elements ignoring click() code if added to DOM after pageload
问：
所以我有一些代码，我在页面加载后向 DOM 添加了一个元素（以下示例中的第二个链接），但是这个新添加的元素忽略了为其定义的所有函数。因此，对于下面的示例，我希望 div 中带有测试类的所有链接都显示警报。对于硬编码的链接工作正常，但之后添加的链接会忽略它。
<html>
<head>
<title>SO Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<a href="#" title="Test">Test Link</a>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("div.test a").click(function() {
alert("click");
return false;
});
$(document.createElement("a")).attr("href","#").text("Test Link 2").appendTo("div.test");
});
-->
</script>
</body>
</html>
编辑：使用jQuery插件将其抽象化的唯一解决方案吗？
答：
2赞
Agent_9191
10/16/2009
#1
你的代码可以被清理，并像你希望的那样行动：
<html>
<head>
<title>SO Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<a href="#" title="Test">Test Link</a>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("div.test a").live('click', function() {
alert("click");
return false;
});
$('<a href="#">Test Link 2</a>').appendTo("div.test");
});
-->
</script>
</body>
</html>
注意：live 在 jQuery 1.9 上不可用
评论
0赞
Andrew G. Johnson
10/16/2009
假设页面上没有其他链接，这只会以相同的方式工作，以为很明显我简化了一个例子......
0赞
Agent_9191
10/16/2009
因此，请缩小选择范围。它仅适用于在 <div class=“test” 中添加的任何链接>。
0赞
Andrew G. Johnson
10/16/2009
我不是要复制链接，而是要从头开始创建一个新链接，因此我希望我的代码能够反映这一点
0赞
adardesign
10/16/2009
背后的想法是，它向文档添加了一个永远不会更改的事件侦听器，并且通过事件委派，它仅在单击所选选择器或指定任何其他事件时触发.live()
3赞
TStamper
10/16/2009
#2
如果您使用 jquery live，它将解决该问题。jQuery 直播将处理程序绑定到所有当前和将来匹配元素的事件（如单击）。
$("div.test a").live("click", function(){ //change to this
});
评论
0赞
adardesign
10/16/2009
如果您使用的是 jQuery 1.2.6 或更早版本，您仍然可以通过使用名为 liveQuery docs.jquery.com/Plugins/livequery 的插件来获得相同的功能
14赞
Sixten Otto
10/16/2009
#3
您的问题是将事件侦听器绑定到当前匹配集中的每个元素。这不是魔术，它不会追溯性地将事件侦听器应用于您添加到 DOM 的新内容。您的选项包括：click()
- 如其他人所提到的，使用 jQuery 中的实时事件功能。
- 你自己做类似的事情，将点击处理程序绑定到你感兴趣的元素的某个共同祖先，然后测试你看到的每次点击的目标，以确定你是否关心它。例如：
$(function(){ $("div.test").click(function(e){ if( $(e.target).is("a") ) { alert("click"); return false; }); }); }); - 在向 DOM 添加新元素的代码中，还要将事件处理程序绑定到这些元素。例如：
$(document.createElement("a")) .attr("href","#") .text("Test Link 2") .click(function(){ alert("click"); }) .appendTo("div.test");
评论
0赞
Andrew G. Johnson
10/16/2009
接受，因为我认为你涵盖了我所有的选择
评论