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：自動刷新

回答

相關問題