Javascript jqueryajax：自动刷新

在我的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);
  });

$（文档）。准备好了吗(
函数（）{
setInterval（函数（）{
$.ajax({
键入：“GET”，
url:“刷新”，
成功：功能（数据）{
var trHTML=''；
$。每个（数据、功能（i、项）{
var buttonVar=（“”+“停止”+“”）；
trHTML+=''+按钮var+''
});
$（'#test1'）.append（trHTML）；
$（文档）。在（'单击'，'bt21'，函数（事件）{
var rownum1=$（this.closest（'tr'）.index（）；
停止测试（数据[rownum1]。进程id）；
});
}
});
}, 5000);
});

您已将AJAX调用设置为每5秒进行一次。每次调用此函数时，您也会在附加的按钮上附加click事件。因此，将有多个事件处理程序附加到同一元素。如果要坚持使用当前代码，则需要在附加另一个元素之前清除该元素上的任何现有事件处理程序。以下是如何做到这一点：

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

---

首先，在刷新时添加具有相同id属性的按钮，这样会在某个时候导致问题

您需要做的是将click事件移到interval函数和ajax回调之外。将进程id添加到数据属性中的按钮，并将单击事件委托给按钮，这样即使在加载页面时DOM中没有创建元素，它也可以工作

下面是一个示例，尽管我不确定它是否有效（不能很容易地模拟）：

$（文档）.ready（函数（）{
setInterval（函数（）{
$.ajax（{
键入：“GET”，
url:“刷新”，
成功：功能（数据）{
var trHTML=''；
$。每个（数据、功能（i、项）{
var buttonVar=''+“停止”+''；
trHTML+=''+按钮var+''
});
$（'#test1'）.append（trHTML）；
}
});
}, 5000);
$（'#test1'）。on（'click'，'.btn'，function（）{
stopTest（$（this）.data（'process_id'））；
});
});

每次从ajax调用刷新页面时，新的事件侦听器都会绑定到内存中的按钮。您需要清除事件侦听器，然后创建一个新的侦听器

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

我总是取消绑定在ajax调用中创建的事件侦听器，以防止浏览器内存过载或出现问题

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

$（文档）。准备好了吗(
函数（）{
setInterval（函数（）{
$.ajax({
键入：“GET”，
url:“刷新”，
成功：功能（数据）{
var trHTML=''；
$。每个（数据、功能（i、项）{
var buttonVar=（“”+“停止”+“”）；
trHTML+=''+按钮var+''
});
$（'#test1'）.append（trHTML）；
$（document）.unbind（）.on（'click'，'#bt21'，函数（事件）{
var rownum1=$（this.closest（'tr'）.index（）；
停止测试（数据[rownum1]。进程id）；
});
}
});
}, 5000);
});

您仍然看到相同的行为（多次运行）还是看到错误？

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