javascript - on() 方法不适用于动态生成的 HTML

Question

我正在tr向我的表中动态添加一个表行 ( )，并且这些tr标签包含一些链接。

我有一个 jQuery 脚本，当点击里面的链接时调用它tr。该脚本不适用于这些链接。它在我重新加载页面并tr从服务器端填充时起作用。

我该如何克服这个问题？

$(".comment-like").on('click',function() {
    var spanEle = $(this).closest('li').find('.comment-like-count');
    if (spanEle.length) {
        var newCount = parseInt(spanEle.text(),10);
        spanEle.text(newCount + 1);
    }
});

Answer 1

您应该将侦听器委托给父表，而不是链接本身，因为它们动态地来来去去试试这个：

$('your table selector').on('click','.comment-like', function () {
    var spanEle = $(this).closest('li').find('.comment-like-count');
    if (spanEle.length) {
        var newCount = parseInt(spanEle.text(), 10);
        spanEle.text(newCount + 1);
    }
});

Answer 2

我认为您想改用委托。

Answer 3

选择页面加载时存在的父选择器。如果没有，请使用$('body')

$('.elem-existing-on-pageload').on('click', '.comment-like', function() {
    ...
});

Answer 4

添加后，您必须为这些新元素附加事件处理程序。