html - ajax调用后jQuery点击功能不起作用？

Question

jQuery click 函数在这里工作正常

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

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

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

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

小提琴演示

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

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