jquery ajax call runs multiple times

I'm having a problem when I click my generate cards button multiple times(it generates a new set of cards randomly on every click) and then I click on any of my buttons that sort it will run multiple ajax calls instead of just the latest generated array. It will pass in every array of cards that has been generated not just the most recent one, sort of like it's keeping a queue.

console log will output, "sending color sort", "sending color sort", "sending color sort", etc. *For as many times as i've clicked my generate_cards* button

How can I have it so the sort function only runs once.

<input type="button" value="Generate Cards" id="generate_cards"> </input>
<input type="button" class="sorter" value="Color Sort" id="color_sort"> </input>
<input type="button" class="sorter" value="Shape Sort" id="shape_sort"> </input>
Generate Cards:
 $('#generate_cards').click(function() {
          $.ajax({
          url: ''+set,
          async: false,
          type: 'POST',
          dataType: 'html',
          success: function(data) {
          var obj = JSON.parse(data);
         //sent array to sorting function :
          sorting(obj);
          var tmpl = $("#formInfo_tmpl").html();
          var html = Mustache.to_html(tmpl, obj);
          pool_window.html(html);
          initilizejs();

          },
          error:function(jqXHR, textStatus, errorThrown){
          alert("Error type" + textStatus + "occured, with value " + errorThrown);
                                   }
          });
card sort function
function sorting(cards) {

$('.sorter').on("click", function() {
var cards_window = $("#sealed_pool");
var sort_type = $(this).attr('id');
//just give me the first word:
sort_type = sort_type.replace(/(\w+).*/,"$1");

console.log('sending'+sort_type);

      $.ajax({
      url: '',
      async: false,
      type: 'POST',
      data: ({'cards':cards, 'sort_type':sort_type}),
      dataType: 'html',
      success: function(data) {
         var obj = JSON.parse(data);
        if(sort_type =='color_sort')
              {
        var tmpl = $("#color_sort_tmpl").html();
              }
         if(sort_type =='shape_sort')
              {
        var tmpl = $("#formInfo_tmpl").html();
              }
            var html = Mustache.to_html(tmpl, obj);
            cards_window.html(html);
        initilizejs();

      },
               error:function(jqXHR, textStatus, errorThrown){
                                   alert("Error type" + textStatus + "occured, with value " + errorThrown);
                               }
      });

});

}

Answers


remove the previous click-listener before you add a new:

$('.sorter')
  .off("click")
  .on("click", function() {
    //code
  });

You need to use setInterval within the document ready function, like this: $(document).ready(function() {setInterval(doAjax, 5000);});


Need Your Help

Will only display first part of mysql_fetch_array

php mysql sql arrays fetch

Although variations of this question have been asked before, none of them have helped me solve this puzzle. at present the form I have put together updates the database fine etc, the issue is when ...

How many operands may an overloaded function-call operator take?

c++ operators operator-overloading

Exercise 14.33: How many operands may an overloaded function-call