ajax调用后jQuery点击功能不起作用？ [复制]

Question

jQuery click 函数在这里可以正常工作

<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
});

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

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

点击事件在定义事件的那一点不存在。您可以使用直播或委托活动。

$('.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 在一个 js 单独的文件中。我所做的是我将新元素的 javascript 放入加载了 ajax 的 html 中，它对我来说很好用！ 这适用于那些拥有大文件 javascript 的人！