Jquery 如何在ajax调用后重置所有事件？

我通过ajax分页加载数据

我为每个数据设置事件，如下所示每个数据都有一个html类，名为：

但是每次ajax调用，每个数据元素都会得到越来越多的事件。例如，如果发生了三个ajax调用并加载了三块数据集，那么当第一个数据集元素之一将被更改时，会发生三次警报，因为上面的js代码被调用了三次

实际上我使用第三方库。以下是完整的代码：

$.endlessPaginate({
    paginateOnScroll: true,
    paginateOnScrollMargin: 50,
    onCompleted: function(context, fragment) {
        $('.like').change(function() {
            if (checked) {
                alert("hi");
            }
        })
    }
});

如何修复它？

您应该使用off解除以前绑定的绑定：

onCompleted: function(context, fragment) {
        $('.like').off('change');//APPEND THIS LINE
        $('.like').change(function() {
            if (checked) {
                alert("hi");
            }
        })
    }

或 如果您总是使用.like，而不是每次都绑定onComplete，那么您可以使用ajax中的以下代码来处理所有.like元素：

这两种方法都是正确的，性能真实：

方法1： $function{ $btn1.单击函数{ $likes.append； $'.like'.off'change'；//追加此行 $'.like'.changefunction{ 阿勒蒂； }; }; }; 添加新的类

---

您需要使用事件委派。这意味着您将在插件代码之外设置一次事件。从反复设置事件的插件中删除事件代码，然后将以下代码放在页面中的某个位置：

$(document).on("change",".like",function()
{
    if ($(this).is(':checked'))
    {
        alert("hi");
    }
});

通过这种方式，您可以在dom中的任何位置都获得click事件，然后如果单击的对象具有.like类，则执行回调。这将适用于任何.like元素，不管它最初是存在于dom中还是动态添加的

更新：请参见工作小提琴：

---

第一个建议不起作用。。。如果我使用第二个，事件不会为新加载的数据设置。。。或者与第一个相同的效果。@user3595632双向都是正确的。查看我附加的代码片段

$(document).on('change', '.like', function(){
    if (checked) {
        alert("hi");
    }
});

$(document).on("change",".like",function()
{
    if ($(this).is(':checked'))
    {
        alert("hi");
    }
});