处理 jQuery 中附加元素的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12055462/
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
Handle click event for appended elements in jQuery
提问by Eddard Stark
I have generated few elements in my page using following method. For example,
我使用以下方法在我的页面中生成了几个元素。例如，
$("#button"+caption).click(function(){
var firstDisplay = '<div id="firstDisp'+caption+'"><ul>';
for(var i=0;i<parents.length;i++){
firstDisplay=firstDisplay+'<li class="fClick">'+parents[i]+'</li>';
}
firstDisplay=firstDisplay+'</ul></div>';
$(firstDisplay).dialog();
});
and when i create an onclick event for 'fClass' like so :
当我为“fClass”创建一个 onclick 事件时：
$(".fClick").click(function(){
alert("hey!");
});
It does not works ! However, if i put the onclick function inside the other function, right after .dialog(), it works ! I have a lot of elements created this way, so I cannot put all onclick events in a single method. Is there any way around this? I am having the same problem with .append method as well.
它不起作用！但是，如果我将 onclick 函数放在另一个函数中，就在 .dialog() 之后，它就起作用了！我以这种方式创建了很多元素，因此我无法将所有 onclick 事件放在一个方法中。有没有办法解决？我对 .append 方法也有同样的问题。
回答by Selvakumar Arumugam
Change it to .onor .delegatebased on the version of jQuery you are using..
将其更改为.on或.delegate基于您使用的 jQuery 版本。
As of jQuery 1.7+
从 jQuery 1.7+ 开始
$(document).on('click', '.fClick', function(){
alert("hey!");
});
For older jQuery versions use delegate
对于较旧的 jQuery 版本，请使用委托
$(document).delegate('.fClick', 'click', function(){
alert("hey!");
});
回答by Abraham
Use oninstead of click:
使用on代替click：
$(".fClick").on('click',function(){
alert("hey!");
});
clickadds click handlers to .fClickelements that are present when you call $('.fClick').click({...}). New .fClickelements added later won't have the click event. But when you use on, all .fClickelements will have a click handler, even if they are added later.
Read more here: http://api.jquery.com/on/
click将单击处理程序添加到.fClick您调用$('.fClick').click({...}). .fClick以后添加的新元素不会有 click 事件。但是当您使用 时on，所有.fClick元素都会有一个点击处理程序，即使它们是稍后添加的。
在此处阅读更多信息：http: //api.jquery.com/on/
回答by DenniZr
call the $(document).ready(function() again and add your code there. The document gets read (refreshed) again and you can just apply your code there.
再次调用 $(document).ready(function() 并在那里添加您的代码。再次读取（刷新）文档，您可以在那里应用您的代码。
回答by DenniZr
What Vega has said is completely working. There is a hint : I think in the second line there is a mistake. Probably you can use addClass method because you can't put id or class in rendering. Here is an example:
Vega 所说的完全有效。有一个提示：我认为在第二行中有一个错误。可能您可以使用 addClass 方法，因为您不能将 id 或 class 放入渲染中。下面是一个例子：
var content = "<div>Hello, World</div>";
$("div").after(content);
$("last:div").addClass("mydiv");
And the class will be added but I am not sure that you can add an id.
并且将添加该类，但我不确定您是否可以添加 id。
