ajax调用后jQuery单击功能不起作用？

Question

jQuery单击功能在这里工作正常

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

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

但如果我<a>通过ajax 设置一些,$('.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仅适用于页面上已有的元素.on如果要连接未来的元素,就必须使用类似的东西

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

Answer 2

当您使用$('.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

由于该类是动态添加的,因此您需要使用事件委派来注册事件处理程序,如:

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

这会将您的事件附加到#LangTable元素中的任何锚点,从而减少必须检查整个document元素树和提高效率的范围.

FIDDLE DEMO

Answer 5

这是小提琴

与您的代码相同，但它适用于动态创建的元素。

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