jQuery ajax调用后jQuery点击功能不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17715274/
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 function doesn't work after ajax call?
提问by suhailvs
The jQuery click function works fine here
jQuery 点击功能在这里工作正常
<div id="LangTable"><a class="deletelanguage">delete</a></div>
$('.deletelanguage').click(function(){
alert("success");
});
but if I set some <a>by ajax, $('.deletelanguage').clickdoesn't work.
但是如果我<a>通过 ajax设置一些，$('.deletelanguage').click则不起作用。
for example
例如
function CreateRow(jdata) {
$('#LangTable').append('<a class="deletelanguage">delete</a>');
}
$.ajax({
url: "/jobseeker/profile/",
success: CreateRow
});
Now the $('.deletelanguage').clickfor the last <a>is not working.
现在$('.deletelanguage').click最后一个<a>不起作用。
jsfiddle example :http://jsfiddle.net/suhailvs/wjqjq/
jsfiddle 示例：http: //jsfiddle.net/suhailvs/wjqjq/
Note: the CSS works fine here.
注意：CSS 在这里工作正常。
I want to make these newly appended <a>working with jQuery click.
我想让这些新附加的<a>与 jQuery click 一起使用。
回答by TGH
The problem is that .click only works for elements already on the page.
You have to use something like onif you are wiring up future elements
问题是 .click 仅适用于页面上已有的元素。你必须使用类似的东西，on如果你要连接未来的元素
$("#LangTable").on("click",".deletelanguage", function(){
alert("success");
});
回答by Arun P Johny
When you use $('.deletelanguage').click()to register an event handler it adds the handler to only those elements which exists in the dom when the code was executed
当您使用$('.deletelanguage').click()注册事件处理程序时，它仅将处理程序添加到执行代码时存在于 dom 中的那些元素
you need to use delegation based event handlers here
您需要在此处使用基于委托的事件处理程序
$(document).on('click', '.deletelanguage', function(){
alert("success");
});
回答by coolguy
$('body').delegate('.deletelanguage','click',function(){
alert("success");
});
or
或者
$('body').on('click','.deletelanguage',function(){
alert("success");
});
回答by pala?н
Since the class is added dynamically, you need to use event delegationto register the event handler like:
由于该类是动态添加的，因此您需要使用事件委托来注册事件处理程序，例如：
$('#LangTable').on('click', '.deletelanguage', function(event) {
event.preventDefault();
alert("success");
});
This will attach your event to any anchors within the #LangTableelement,
reducing the scope of having to check the whole documentelement tree and increasing efficiency.
这会将您的事件附加到#LangTable元素内的任何锚点，从而减少必须检查整个document元素树的范围并提高效率。
回答by Vond Ritz
Here's the FIDDLE
这是小提琴
Same code as yours but it will work on dynamically created elements.
与您的代码相同，但它适用于动态创建的元素。
$(document).on('click', '.deletelanguage', function () {
alert("success");
$('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
回答by prospector
The click event doesn't exist at that point where the event is defined. You can use live or delegate the event.
单击事件在定义事件的那个点不存在。您可以使用实时或委托事件。
$('.deletelanguage').live('click',function(){
alert("success");
$('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
回答by pollux1er
I tested a simple solution that works for me! My javascript was in a js separate file. What I did is that I placed the javascript for the new element into the html that was loaded with ajax, and it works fine for me! This is for those having big files of javascript!!
我测试了一个对我有用的简单解决方案！我的 javascript 在一个 js 单独的文件中。我所做的是将新元素的 javascript 放入使用 ajax 加载的 html 中，它对我来说很好用！这是为那些拥有大文件 javascript 的人准备的！！
