JQuery 函数不绑定到新添加的 dom 元素

这里是 index.html:

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {
$('.btn_test').click(function() { alert('test'); });
});


function add(){
$('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
}


</script>
</head>
<body>
<a href="javascript:;" class="btn_test">test1</a>
<a href="javascript:;" onclick="add()">add</a>
</body>

如果我点击 test1链接，它显示 alert('test')，但如果我点击 add链接然后点击 test，它不显示任何东西。

你能解释一下吗？

69814 次浏览
小开

您需要使用一个“实时”单击监听器，因为最初只有单个元素存在。

$('.btn_test').live("click", function() {
alert('test');
});

更新: 由于 live 不推荐使用，因此应该使用“ on ()”:

$(".btn_test").on("click", function(){
alert("test");
});

Http://api.jquery.com/on/

小开

点击绑定到 jQuery 目前可见的内容。你需要使用.live:

$('.btn_test').live('click', function() { alert('test'); });
小开

你需要 现场听众而不是点击:

$('.btn_test').live('click', function() {
alert('test');
});

原因是 click只在加载页面时将侦听器分配给元素。添加的任何新元素上都不会有此侦听器。Live 在页面加载时将单击侦听器添加到元素中，然后再添加

小开

当文档加载时，您向每个匹配的类添加事件侦听器，以侦听这些元素上的 click 事件。相同的侦听器不会自动添加到稍后添加到 Dom 的元素中。

小开

因为事件绑定到文档中的每个匹配元素。添加的任何新元素都不会自动绑定相同的事件。

在添加事件之后，必须手动将事件绑定到任何新元素，或者使用活动侦听器。

小开

这是因为单击事件仅在绑定时绑定到现有元素。您需要使用将事件绑定到页面上现有和未来元素的活动或委托。

$('.btn_test').live("click", function() { alert('test'); });

Jquery 直播

小开

改为使用 Jquery 活下去

$('.btn_test').live(function() { alert('test'); });

编辑: 不推荐使用 live()，而应该使用 on()。

$(".btn_test").on("click", function(){
alert("test");
});
小开 
$('.btn_test').click

将为页面上可用的元素添加处理程序(此时‘ test’不存在!)

您必须要么为这个元素手动添加一个点击处理程序当您做追加，或者使用一个 live事件处理程序将工作为每个元素，即使您创建它以后。.

$('.btn_test').live(function() { alert('test'); });
小开

对于在2011年之后面临这个问题的用户，有一种新的合适的方法来解决这个问题:

$(document).on('click', '.btn_test', function() { alert('test'); });

这是从 jQuery 1.7开始的。

有关更多信息，请参见 直接和委托的活动

小开

或者在页面末尾运行脚本

小开

我也有同样的问题，就像我刚要扯我的头发，然后我得到了解决方案。 我用了不同的语法

$(".innerImage").on("click", function(){
alert("test");
});

它对我不起作用(innerImage 是动态创建的 dom) 现在我开始吸毒了

$(document).on('click', '.innerImage', function() { alert('test'); });

Http://jsfiddle.net/sdjep/2/

谢谢@Moshe Katz

小开

在 jquery 1.7 on 方法之后就可以使用了，它真的很好用

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("The paragraph was clicked.");
$("body").append("<p id='new'>Now click on this paragraph</p>");
});
$(document).on("click","#new",function(){
alert("On really works.");
});
});
</script>
</head>
<body>
<p>Click this paragraph.</p>
</body>
</html>

看到它的实际行动 Http://jsfiddle.net/rahulchaturvedie/czr6n/

小开

您需要添加一个适当的按钮点击功能，以提供适当的结果

$("#btn1").live(function() { alert("test"); });

提交答案