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

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

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

Answer 2

首先，您在刷新时添加具有相同id属性的按钮，以便在某些时候引起您的问题。

您需要做的是将click事件移出interval函数和ajax回调。将进程ID添加到数据属性中的按钮，并将单击事件委托给按钮，这样即使在页面加载时尚未在DOM中创建元素，它也能正常工作。

这是一个例子，虽然我不确定它是否有效（无法轻易模拟）：

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

每次从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);
});

Jquery Ajax：自动刷新

3 个答案: