jQuery 点击事件没有被触发

Question

我在使用 jQuery

准备好文档后将 table 添加到普通 HTML 页面

我得到的值是一串"<table class=\"table table-hover\"><tr><th>Name</th><th>Father name.... <td><a class="deleteEmployee" href=\"#\" >Delete</a></td></tr> "

jQuery方法：

$(function () {
  $.ajax({
    url: "/Account/Report",
  }).done(function (callback) {
    $('#report').html(callback);
  });
});

我可以使用 div #report 绑定字符串，但以下内容不起作用。

$('.deleteEmployee').click(function () {
console.log('Clicked');
});

我认为 DOM 可能尚未更新，但我能够看到锚元素并且 table 已更新。

我在这里错过了什么。

Answer 1

如果您想将事件附加到动态加载的内容，您必须将事件附加到文档并使用这样的选择器：

$(document).on("click",".deleteEmployee",function(){
    console.log("Clicked");
});

Answer 2

可以在ajax加载完成后绑定点击方法...

$(function () {
  $.ajax({
    url: "/Account/Report",
  }).done(function (callback) {
    $('#report').html(callback);

            $('.deleteEmployee').click(function () {
            console.log('Clicked');
            });

  });
});

Answer 3

我最喜欢的load()...如上

$('#report').load("/Account/Report",function (callback) {

        $('.deleteEmployee').click(function () {
        console.log('Clicked');
        });
})

jQuery 点击事件没有被触发

jQuery Click event not getting triggered

ajax

jquery

dom

onclick