jQuery function 未绑定到新添加的 dom 元素
[英]jQuery function not binding to newly added dom elements
问题描述
Here's index.html :
这是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>
If I click on test1 link, it shows alert('test') , but if I click on add link then click on test , it doesn't show anything.如果我点击test1链接，它会显示alert('test') ，但如果我点击add link 然后点击test ，它不会显示任何内容。
Could you explain it?你能解释一下吗？
13 个解决方案
解决方案1
211 2012-08-14 21:42:36
For users coming to this question after 2011, there is a new proper way to do this:对于 2011 年后提出此问题的用户，有一种新的正确方法可以做到这一点：
$(document).on('click', '.btn_test', function() { alert('test'); });
This is as of jQuery 1.7.这是从 jQuery 1.7 开始的。
For more information, see Direct and delegated events有关详细信息，请参阅直接和委托事件
解决方案2
34 2011-06-30 15:37:05
You need to use a "live" click listener because initially only the single element will exist.您需要使用“实时”单击侦听器，因为最初只会存在单个元素。
$('.btn_test').live("click", function() {
alert('test');
});
Update: Since live is deprecated, you should use "on()":更新：由于 live 已被弃用，您应该使用“on()”：
$(".btn_test").on("click", function(){
alert("test");
});
解决方案3
15 2013-02-14 03:28:33
I have same problem like question I was just near to pulling my hair then i got the solution.我有同样的问题，比如我刚刚拉扯头发的问题，然后我得到了解决方案。 I was using different syntax我使用不同的语法
$(".innerImage").on("click", function(){
alert("test");
});
it was not working for me (innerImage is dynamically created dom) Now I'm using它对我不起作用（innerImage 是动态创建的 dom）现在我正在使用
$(document).on('click', '.innerImage', function() { alert('test'); });
http://jsfiddle.net/SDJEp/2/ http://jsfiddle.net/SDJEp/2/
thanks @Moshe Katz谢谢@Moshe Katz
解决方案4
8 2011-06-30 15:37:45
.click binds to what is presently visible to jQuery. .click 绑定到 jQuery 目前可见的内容。 You need to use.live:你需要使用.live：
$('.btn_test').live('click', function() { alert('test'); });
解决方案5
7 2011-06-30 15:38:35
Use Jquery live instead.使用 Jquery live代替。 Here is the help page for it http://api.jquery.com/live/这是它的帮助页面http://api.jquery.com/live/
$('.btn_test').live(function() { alert('test'); });
Edit: live() is deprecated and you should use on() instead.编辑： live()已被弃用，您应该使用on()代替。
$(".btn_test").on("click", function(){
alert("test");
});
解决方案6
3 2011-06-30 15:38:34
This is because you click event is only bound to the existing element at the time of binding.这是因为您单击事件仅在绑定时绑定到现有元素。 You need to use live or delegate which will bind the event to existing and future elements on the page.您需要使用 live 或 delegate 将事件绑定到页面上现有和未来的元素。
$('.btn_test').live("click", function() { alert('test'); });
解决方案7
2 2011-06-30 15:37:47
you need live listener instead of click:你需要现场听众而不是点击：
$('.btn_test').live('click', function() {
alert('test');
}); The reason being is that the click only assigns the listener to elements when the page is loading.原因是click仅在页面加载时将侦听器分配给元素。 Any new elements added will not have this listener on them.添加的任何新元素都不会有此侦听器。 Live adds the click listener to element when the page loads and when they are added afterwards Live 在页面加载时以及之后添加时将点击侦听器添加到元素
解决方案8
1 2013-07-11 15:35:49
After jquery 1.7 on method can be used and it really works nice 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>
see it in action http://jsfiddle.net/rahulchaturvedie/CzR6n/在行动中看到它http://jsfiddle.net/rahulchaturvedie/CzR6n/
解决方案9
1 2011-06-30 15:37:50
When the document loads you add event listeners to each matching class to listen for the click event on those elements.当文档加载时，您将事件侦听器添加到每个匹配的 class 以侦听这些元素上的单击事件。 The same listener is not automatically added to elements that you add to the Dom later.相同的侦听器不会自动添加到您稍后添加到 Dom 的元素中。
解决方案10
1 2011-06-30 15:38:34
Because the event is tied to each matching element in the document ready.因为事件绑定到文档中的每个匹配元素准备就绪。 Any new elements added do NOT automatically have the same events tied to them.添加的任何新元素都不会自动与它们关联相同的事件。
You will have to manually bind the event to any new element, after it is added, or use the live listener.添加后，您必须手动将事件绑定到任何新元素，或者使用实时侦听器。
解决方案11
1 2011-06-30 15:41:48
$('.btn_test').click
will add the handler for elements which are available on the page (at this point 'test' does not exist!)将为页面上可用的元素添加处理程序（此时“测试”不存在！）
you have to either manually add a click handler for this element when you do append, or use a live event handler which will work for every element even if you create it later..您必须在执行 append 时为此元素手动添加点击处理程序，或者使用适用于每个元素的live事件处理程序，即使您稍后创建它也是如此。
$('.btn_test').live(function() { alert('test'); });
解决方案12
0 2013-01-23 22:47:05
Or just run the script at the end of your page或者只是在页面末尾运行脚本
解决方案13
0 2017-09-06 14:45:43
You need to add a proper button click function to give a proper result您需要添加一个正确的按钮单击 function 以给出正确的结果
$("#btn1").live(function() { alert("test"); });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.