Javascript jQuery 函数未绑定到新添加的 dom 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6537323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery function not binding to newly added dom elements
提问by Ralsk28
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 test1link, it shows alert('test'), but if I click on addlink then click on test, it doesn't show anything.
如果我点击test1链接，它会显示alert('test')，但如果我点击add链接然后点击test，它不会显示任何内容。
Could you explain it?
你能解释一下吗？
回答by Moshe Katz
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
有关更多信息，请参阅直接和委托事件
回答by Doug Molineux
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");
});
回答by UFM
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'); });
thanks @Moshe Katz
谢谢@Moshe Katz
回答by doctorless
.click binds to what is presently visible to jQuery. You need to use .live:
.click 绑定到当前对 jQuery 可见的内容。您需要使用 .live：
$('.btn_test').live('click', function() { alert('test'); });
回答by Amir Raminfar
Use Jquery liveinstead. Here is the help page for it http://api.jquery.com/live/
改用 Jquery 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");
});
回答by scrappedcola
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'); });
回答by locrizak
you need live listenerinstead of click:
你需要现场听众而不是点击：
$('.btn_test').live('click', function() {
alert('test');
});The reason being is that the clickonly assigns the listener to elements when the page is loading. 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
原因是click只有在页面加载时才将侦听器分配给元素。添加的任何新元素上都不会有此侦听器。Live 在页面加载时以及之后添加时将点击侦听器添加到元素
回答by shanethehat
When the document loads you add event listeners to each matching class to listen for the click event on those elements. The same listener is not automatically added to elements that you add to the Dom later.
当文档加载时，您将事件侦听器添加到每个匹配的类以侦听这些元素上的单击事件。相同的侦听器不会自动添加到您稍后添加到 Dom 的元素中。
回答by Neil N
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.
在添加事件后，您必须手动将事件绑定到任何新元素，或使用实时侦听器。
回答by Karoly Horvath
$('.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 liveevent handler which will work for every element even if you create it later..
您必须在追加时手动为此元素添加单击处理程序，或者使用live事件处理程序，即使您稍后创建它，该处理程序也适用于每个元素。
$('.btn_test').live(function() { alert('test'); });
