Question

我通过ajax分页加载数据。

我为每个数据设置了这样的事件（每个数据都有一个html类，名为like）：

$('.like').change(function() {
    alert(checked);
})

但每次ajax调用时，每个数据元素都会越来越多地发生事件。例如，如果加载了三个ajax调用并且加载了三个数据集块，那么当{1}}中的一个数据集元素为alert()时，changed会出现三次，因为上面{{1}调用三次代码...

其实我使用的是第三方库。这是完整的代码：

js

我该如何解决？

Answer 1

你应该使用off取消绑定以前的绑定：

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

或如果你总是使用.like，而不是每次都绑定onComplete，你可以使用ajax中的代码来代替所有.like元素：

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

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

<强>方法一：

$(function(){ $("#btn1").click(function(){ $("#likes").append('<input type="text" class="like">'); $('.like').off('change');//APPEND THIS LINE $('.like').change(function() { alert("hi"); }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn1" >Add new like class</button> <div id="likes"> <input type="text" class="like"> </div>

方法2：

$(function(){ $("#btn1").click(function(){ $("#likes").append('<input type="text" class="like">'); }); $(document).on('change', '.like', function() { alert("hi"); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn1" >Add new like class</button> <div id="likes"> <input type="text" class="like"> </div>

Answer 2

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

.like

这样你就可以在dom上的任何地方获得click事件，然后如果被点击的对象具有.like类，则执行回调。这适用于任何not all code path return value元素，无论它最初是在dom上存在还是动态添加。

更新：见工作小提琴：

https://jsfiddle.net/pfu6d1gh/

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

2 个答案: