Function .ajaxComplete () executes multiple times

Question

Function .ajaxComplete () executes multiple times

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I want to add this function after a .ajaxComplete, but every time an ajax happens, this bolt executes a number of times equal to the amount of ajax that happened.

For example, if I click the button in the .chPlus class the first time, the console prints "more" once;

When I click again, the console prints two more times than the first, then 3 times, and so on.

$(document).ajaxComplete( function(){
    $('.chButton').click( function(){
       if($(this).hasClass('chPlus')){
           console.log("mais");
       } else {
           console.log("menos");
       }
    });
});

I found a solution in the following topic: link

The solution would be the .bind function in document.ready with the ajax complete function. but I do not know how to do it or I do not understand it.

Here's my implementation:

jQuery(document).bind( "ajaxComplete", function() {
    jQuery('.chButton').click( function(){
           if(jQuery(this).hasClass('chPlus')){
               alert("mais");
           } else {
               alert("menos");
           }
     });
});

javascript jquery ajax

asked by anonymous 20.10.2017 / 20:12

2 answers

1

Following the response from @Isac, the methods on and off that were added in the 1.7 version of jQuery , these methods came to replace the bind and unbind , which from version < in> 3.0 have become obsolete.

$("#b1").on("click", function(){
  console.log("B1");
  $("#b2").off("click").on("click", function(){
    console.log("B2");
  });
});

<script src="https://code.jquery.com/jquery-git.js"></script><buttonid="b1">b1</button>
<button id="b2">b2</button>

21.10.2017 / 09:43

Inserting index and value into a two-dimensional array Check if a record came null from the back end in the Angular

score 3 · Accepted Answer

The problem is that you are registering multiple click functions on the same element.

Consider the following code, which illustrates your problem:

$("#b1").click(function(){
  console.log("B1");
  
  //cada vez que clica no B1 regista outra função de click para o B2
  $("#b2").click(function(){
    console.log("B2");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="b1">b1</button>
<button id="b2">b2</button>

The more often you click on the b1 more times the b2 prints, because you have multiple functions of click . One for each click on b1 .

There are many possible solutions. One is unbind before registering the click function:

$("#b1").click(function(){
  console.log("B1");
  
  $("#b2").unbind("click"); //retirar o click anterior
  $("#b2").click(function(){
    console.log("B2");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="b1">b1</button>
<button id="b2">b2</button>

Now this solution will only make sense if ajaxComplete modifies your DOM, for example by adding new .chButton buttons. Otherwise it is preferable to set the click code of the .chButton button outside the ajaxComplete , like this:

jQuery('.chButton').click( function(){
       if(jQuery(this).hasClass('chPlus')){
           alert("mais");
       } else {
           alert("menos");
       }
});
jQuery(document).bind( "ajaxComplete", function() {
    //Outro código a ser processado quando um pedido ajax termina
});