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

Question

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

<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的{​​{1}}无效。

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

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

我想让这些新附加的<a>使用jQuery click。

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

由于该类是动态添加的，因此您需要使用event delegation来注册事件处理程序，如：

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

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

FIDDLE DEMO

Answer 5

这是 FIDDLE

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

$(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

在定义事件的那一点上，click事件不存在。您可以使用直播或委派活动。

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

我测试了一个适合我的简单解决方案！ 我的javascript是在一个单独的文件中。我做的是我将新元素的javascript放入用ajax加载的html中，它对我来说很好用！ 这适用于那些拥有javascript大文件的人！