jQuery 单击事件，添加内容后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5589491/
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 click event, after appending content
提问by Pav
Wondering why the example below doesn't work?
想知道为什么下面的例子不起作用？
<a id="load_list" href="#">Load the list</a>
<ul></ul>
<script type="text/javascript">
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').append('<li><a href="#">Click here</a></li>');
return false;
});
$('ul li a').click(function() {
alert('Thank you for clicking');
return false;
});
});
</script>
回答by amosrivera
Because the elements that you are appending do not exist when you define the the clickhandler, they are created dynamically. To fix this you can use the delegate()method from jQuery.
因为在定义click处理程序时您要附加的元素不存在，所以它们是动态创建的。要解决此问题，您可以使用jQuery 中的delegate()方法。
$('ul').delegate('a','click',function() {
// your code here ...
});
Online example:http://jsfiddle.net/J5QJ9/
在线示例：http : //jsfiddle.net/J5QJ9/
回答by Carlos Tapia
From jQuery 1.7 you can use the .on() handler to bind the newly created element ot the 'click' event:
从 jQuery 1.7 开始，您可以使用 .on() 处理程序将新创建的元素绑定到 'click' 事件：
<script type="text/javascript">
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
alert('thank you for clicking');
});
});
</script>
(this is with the original example).
（这是原始示例）。
回答by Matsteel
$(document).on('click','ul li a', function(){
// Content Code
});
回答by juFo
.live is deprecated as of 1.7. Try this (jquery 2.1.4):
.live 从 1.7 开始被弃用。试试这个（jquery 2.1.4）：
Html:
网址：
<a id="load_list" href="#">Load the list</a>
<ul></ul>
JQuery:
查询：
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').html("");
$("<li/>", {
"class" : "someClass",
text: "Click here",
click: function() {
alert($(this).text());
}
}).appendTo('ul');
});
});
or something like this (but I didn't find how to attach click to the anchor):
或类似的东西（但我没有找到如何将点击附加到锚点）：
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').html("");
$('<li><a href="#">Click here</a></li>').on({
click: function() {
alert("hoi");
}
}).appendTo("ul");
});
});
回答by mcgrailm
回答by Craig White
Try this new code, it removes existing click events for the old elements and then adds them again for both the old and new.
试试这个新代码，它删除旧元素的现有点击事件，然后为旧元素和新元素再次添加它们。
<a id="load_list" href="#">Load the list</a>
<ul></ul>
<script type="text/javascript">
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').append('<li><a href="#">Click here</a></li>');
$('ul li a').unbind('click', thanks());//Remove existing binds
$('ul li a').bind('click', thanks());//Remove existing binds
return false;
});
function thanks() {
alert('Thank you for clicking');
return false;
});
$('ul li a').bind('click', thanks());
});
</script>
