jquery Ajax：自动刷新

在我的Ajax成功函数中，我创建了按钮，然后点击我打电话给一个函数。问题：页面基于设置的时间间隔重新加载计时器，但是当我点击按钮时，它将根据页面重新加载的次数调用函数。jquery 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); 
    });

来源

2015-10-13 20prj

每次页是从你的AJAX调用一个新的事件，听者一定会刷新内存中的按钮。您需要清除事件侦听器，然后创建一个新侦听器。在Ajax调用创建如果有的话，从被过载保持浏览器内存或防止您遇到的问题

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

我总是解除绑定事件侦听器。

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

来源

2015-10-13 02:59:28

非常感谢.. @ Jeffrey Cobb..it工作 – 20prj

您已设置了AJAX调用每5秒进行。每次调用此函数时，您都会将附加的click事件附加到您追加的按钮上。所以会有多个事件处理程序附加到相同的元素。如果您想要保留当前的代码，您需要清除该元素上的任何现有事件处理程序，然后再附加另一个事件处理程序。以下是如何做到这一点：

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

来源

2015-10-13 02:36:29

没有，这不起作用... – 20prj

你仍然看到相同的行为（多次运行），或者你看到错误吗？ –

它仍然运行多次...没有错误 – 20prj

首先要附加具有相同id属性等等，那将导致你在某个点上的问题刷新按钮。

你需要做的是将你的点击事件移到间隔函数和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')); 
    }); 
});

来源

2015-10-13 02:47:07

jquery Ajax：自动刷新

回答

相关问题