.ajaxComplete 中的 jquery 代码多次触发，但应该只触发一次

Question

我有 4 个页面加载器函数，当用户向下滚动时，它们会在 div 内使用 ajax post 自动加载填充了数据库数据的 html（对于每个函数，我都有自己的 div ）。现在在这个收到的 htmldata 中，我想要一个 onclick 事件并做一些更多的 ajax 发布操作来操作一些数据并显示更改。

但是当我使用

$( document ).ajaxComplete(function() {
$("#clickelement").click(function(){
//do some ajax post here and fill a div with the received data
});

点击功能被执行 4 次（因为之前有 4 个 ajax 发布操作。当我再次点击它的执行 5 次时（我认为 onclick 触发器内的 ajax 操作也是 .ajaxComplete ），另外当我向下滚动时要加载更多数据，它会执行得更多.. 我怎样才能解决这个问题并只触发一次 .click 并在自动加载的 html 内的所有#clickelement div 上激活 click 功能？

Answer 1

我遇到了同样的问题并遇到了解决方案（忘记在哪里）

$( document ).ajaxComplete(function() {
//Change it to delegated event listener with addition '.off()'
$("#ParentDivOfAjaxContents").off().on('click', '#clickelement', function () {
//do anything you want after the click on'#clickelement'

});
});

希望对遇到同样问题的人有所帮助。

Answer 2

好的，我现在为有兴趣的人解决了：

$('#divwhichisfilledwithajax').on('click', '#clickelement', function () {
//do what the click on the #clickelement should do
});

我搜索了一段时间，发现我可以使用委托事件侦听器。我认为使用这种方法，它会在每次 AJAX 调用后堆积监听器，因为我不仅针对新元素，而且还针对所有以前的元素。而且它只会触发一次。因为侦听器仅添加到适合参数 #clickelement

的新加载元素

简单干净:)

Answer 3

您正在将代码添加到全局 ajaxComplete 事件中。这意味着在 ajax 调用完成的任何时候都会调用它。

ajaxComplete（全局事件） 此事件的行为与 complete 事件相同，并且将在每次 Ajax 请求完成时触发。 Docs

Better docs

您可能正在寻找的是 success 或 complete 回调，它们是 本地 事件（仅在特定的 ajax 调用上触发）并且使用如下：

$.ajax({
  type: "GET",
  data: {},
  dataType: 'text',
  contentType: "application/json",
  url: APP_URL + '/extension/ad/get-user-attributes/' + email,
  success: function(response) {
     // fires when THIS ajax request returns successfully
  },
  error: function(xhr, status, error) { 
    // fires when THIS ajax request returns an error
  },
  complete: function(xhr, status) {
     // fires when THIS ajax request completes (after success or error)
  }
});

关于complete和success的区别see this other answer