jQuery Ajax：自动刷新

Question

In my Ajax success function i created button and on click i am calling a function. The problem: The page reloads based on the timer in set interval but when i click the button it will call the function based on the number of times the page reloaded.

For example: If page reloads 5 times and then i call a function on clicking that button-it will call that function 5 times. if it reloads 10 times then function call is for 10 times.

Please advice what i am doing wrong?

Here is the code:

        $(document).ready(
                function() {
               setInterval(function() {                  
                         $.ajax({
                  type: 'GET',
                   url: 'Refresh',
              success: function(data) {
                 var trHTML = '';
            $.each(data, function(i, item) {
    var buttonVar = ('<button id="bt21" class="btn121">' + "STOP" + '</button>');
          trHTML += '<tr><td>'+buttonVar+'</td></tr>'
            });
          $('#test1').append(trHTML);

          $(document).on('click','#bt21', function(event) {
         var rownum1 = $(this).closest('tr').index();
       stopTest(data[rownum1].process_id);
         });
             }
         });
      }, 5000);
  });

Answer 1

You have set the AJAX call to be made every 5 seconds. Each time time this function is called, you are also attaching the click event on the button you append. So there will be multiple event handlers attached to the same element. You need to clear any existing event handlers on that element before you attach another if you want to stick to your current code. Here's how to do it:

$(document).off('click', '#bt21');
$(document).on('click','#bt21', function(event) {
     var rownum1 = $(this).closest('tr').index();
   stopTest(data[rownum1].process_id);
     });

Answer 2

First you are appending buttons on refresh that have the same id attribute so that's going to cause you issues at some point.

What you need to do is move your click event outside of the interval function and ajax callback. Add the process id to the button in a data attribute and delegate a click event to the button so it will work even though the elements haven't been created in the DOM when the page loads.

Here's an example although I'm not sure if it works (can't really simulate this easily):

$(document).ready(function() {

    setInterval(function() {        
        $.ajax({    
            type: 'GET',
            url: 'Refresh',
            success: function(data) {
                var trHTML = '';
                $.each(data, function(i, item) {
                    var buttonVar = '<button class="btn" data-process-id="' + item.process_id + '">' + "STOP" + '</button>');
                    trHTML += '<tr><td>'+buttonVar+'</td></tr>'
                });

                $('#test1').append(trHTML);
             }
         });
      }, 5000);

    $('#test1').on('click', '.btn', function() {
        stopTest( $(this).data('process_id') );
    });
});

Answer 3

Each time the page is refreshed from your ajax call a new event listener is bound to the button in memory. You need to clear the event listeners then create a new one.

$(some element).unbind().on(...........);

I always unbind event listeners created in an ajax call if anything to keep the browser memory from being over loaded or to prevent the issue you are having.

$(document).ready(
            function() {
           setInterval(function() {                  
                     $.ajax({
              type: 'GET',
               url: 'Refresh',
          success: function(data) {
             var trHTML = '';
        $.each(data, function(i, item) {
var buttonVar = ('<button id="bt21" class="btn121">' + "STOP" + '</button>');
      trHTML += '<tr><td>'+buttonVar+'</td></tr>'
        });
      $('#test1').append(trHTML);

      $(document).unbind().on('click','#bt21', function(event) {

     var rownum1 = $(this).closest('tr').index();
   stopTest(data[rownum1].process_id);
     });
         }
     });
  }, 5000);
});