jQuery点击函数在ajax调用后不起作用？

jQuery点击function在这里工作正常

<div id="LangTable"><a class="deletelanguage">delete</a></div> $('.deletelanguage').click(function(){ alert("success"); }); 

但如果我通过ajax设置一些<a> ， $('.deletelanguage').click不起作用。

例如

 function CreateRow(jdata) { $('#LangTable').append('<a class="deletelanguage">delete</a>'); } $.ajax({ url: "/jobseeker/profile/", success: CreateRow }); 

现在$('.deletelanguage').click最后一个<a>不起作用。

jsfiddle例子： http : //jsfiddle.net/suhailvs/wjqjq/

注意：CSS在这里工作正常。

我想使这些新添加的<a>与jQuery点击工作。

Answer 1

问题是.click只适用于页面上已有的元素。 如果你接线未来的元素，你必须使用类似的东西

 $("#LangTable").on("click",".deletelanguage", function(){ alert("success"); }); 

Answer 2

当你使用$('.deletelanguage').click()来注册一个事件处理程序时，它只$('.deletelanguage').click()这个处理程序添加到当代码执行时在dom中存在的那些元素

你需要在这里使用基于委托的事件处理程序

 $(document).on('click', '.deletelanguage', function(){ alert("success"); }); 

Answer 3

 $('body').delegate('.deletelanguage','click',function(){ alert("success"); }); 

要么

 $('body').on('click','.deletelanguage',function(){ alert("success"); }); 

Answer 4

由于类是dynamic添加的，因此您需要使用事件委托来注册事件处理程序，如下所示：

 $('#LangTable').on('click', '.deletelanguage', function(event) { event.preventDefault(); alert("success"); }); 

这将把你的事件附加到#LangTable元素中的任何锚点，减less了检查整个document元素树和提高效率的范围。

FIDDLE DEMO

Answer 5

这是FIDDLE

与您的代码相同，但它将在dynamic创build的元素上工作。

 $(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>'); }); 

Answer 6

点击事件在事件定义的那一点不存在。 您可以使用现场或委派事件。

 $('.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>'); }); 

Answer 7

我testing了一个适合我的简单解决scheme！ 我的JavaScript是在一个JS单独的文件。 我所做的就是将新元素的javascript放到了用ajax加载的html中，对我来说工作正常！ 这是为那些有大文件的JavaScript！