Function . ajaxComplete() performs several times

Asked

Viewed 485 times

2

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

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

When I click again, the console prints twice more 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: https://stackoverflow.com/questions/1271198/ajaxcomplete-keeps-stacking-up

The solution would be the . bind function in Document.ready with the ajax complete function. but do not know or do not understand.

Follow my implementation:

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

  • How many times you call ajaxComplete? Try to put your code inside jQuery(document).ready(function() {}) in an attempt not to stack..

  • What exactly do you need to do? ajaxComplete is called every request(ajax) that is made, and at each request you are adding a "click" event system to the elements with the "chButton" class, so the block containing the prints will be executed according to the number of requests.

  • ajaxComplete is an Handler (manipulator), it only runs if you call . ajax, . post, . get, . getJSON, . load, etc.

2 answers

3


The problem is that you are registering multiple click functions in 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>
<button id="b1">b1</button>
<button id="b2">b2</button>

The more times you click on b1 more often the b2 prints, because it has several functions of click. One for each click on b1.

There are many possible solutions. One is to 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>
<button id="b1">b1</button>
<button id="b2">b2</button>

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

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
});

  • It worked perfectly, and the example illustrates very well! I used $(". chPlus"). unbind("click");

1

Following @Isac’s response to the methods as well on and off that were added in the version 1.7 of jQuery, these methods have come to replace the methods bind and unbind, than from the version 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>
<button id="b1">b1</button>
<button id="b2">b2</button>

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.