javascript - Jquery Ajax : auto-refresh

Question

在我的 Ajax 成功函数中，我创建了按钮，单击后我正在调用一个函数。问题:页面根据设置的时间间隔重新加载计时器，但是当我单击按钮时，它将根据页面重新加载的次数调用该函数。

例如:如果页面重新加载 5 次，然后我在单击该按钮时调用一个函数，它将调用该函数 5 次。如果重新加载 10 次，则函数调用为 10 次。

请告诉我我做错了什么？

这是代码:

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

您已将 AJAX 调用设置为每 5 秒进行一次。每次调用此函数时，您还会将单击事件附加到您附加的按钮上。因此，同一个元素将会附加多个事件处理程序。如果您想坚持使用当前的代码，则需要在附加另一个元素之前清除该元素上的任何现有事件处理程序。操作方法如下:

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