Question

我有4个页面加载器函数，当用户向下滚动时，自动加载来自数据库的数据，其中包含div内的ajax帖子（对于每个具有自己div的函数）。现在在这个收到的htmldata我希望有一个onclick事件，并做一些更多的ajax post动作来操纵一些数据并显示更改。

但是当我使用

时

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

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

Answer 1

您正在将代码添加到全局ajaxComplete事件中。这意味着它将在ajax调用完成时随时调用。

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

Better docs

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

$.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

之间的差异

Answer 2

好吧，我现在为有兴趣的人解决了这个问题：

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

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

的新加载元素中

简单干净：）

Answer 3

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

$( 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'

});
});

希望它可以帮助任何有同样问题的人。

jaery代码里面.ajaxComplete多次触发，但应该只执行一次

3 个答案: