jQuery with ajax不斷髮布多個結果

我在頁面上顯示許多圖像，顯示機器的狀態。如果你點擊圖像，模態窗口打開，你可以選擇新的狀態。狀態通過ajax發送到數據庫。如果我嘗試更改另一臺機器狀態，以前的機器狀態也會改變。每次我觸摸的狀態都會重新發送一次，作爲我選擇的最後一個狀態。jQuery with ajax不斷髮布多個結果

它以某種方式創建了我已更改的機器的陣列以及每個更改的帖子。刷新頁面會清空數組。

我想我需要在php中使用類似於unset的東西，或者在第一個點擊函數之外移動內部點擊功能。

$(function() { 
    $('#mach_status_dialog').hide(); 
    $('.mach_status').click(function(){ 
     var mach = $(this).attr('id'); 

     $('#mach_status_dialog').dialog({ 
      modal: true, 
      draggable: false, 
      resizable: false, 
      width: 500, 
      title: 'Mach ' + mach + ' status' 
     }); 

     $('.statuses').click(function(){ 
      var user = user; 
      var class = $(this).attr('class'); 
      class = class.substring(10); 
      var status = $(this).first().find('p').parent().text(); 
      var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user; 
      $.ajax({ 
       url: 'ajax_op_mach_status.php', 
       type:'POST', 
       data: data_string, 
       dataType: 'json', 
       cache: false, 
       success: function(response){ 
        var newSrc = 'images/Circle2_'+class+'_25.png'; 
        console.log($('#'+mach+'.mach_status').attr('src', newSrc)); 
        $('#'+mach+'.mach_status').attr('src', newSrc); 
        $('#'+mach+'.mach_status').attr('title', status); 
        $("#mach_status_dialog").dialog('close'); 
       } 
      }); 
     }); 
    }); 
});

來源

2013-10-11 mend

$(function() { 
    $('#mach_status_dialog').hide(); 
    $('.mach_status').click(function(){ 
    var mach = $(this).attr('id'); 

    $('#mach_status_dialog').dialog({ 
     modal: true, 
     draggable: false, 
     resizable: false, 
     width: 500, 
     title: 'Mach ' + mach + ' status' 
    }); 
}); 
$(document).on('click', '.statuses', function(){ 
     var user = user; 
     var class = $(this).attr('class'); 
     class = class.substring(10); 
     var status = $(this).first().find('p').parent().text(); 
     var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user; 
     $.ajax({ 
      url: 'ajax_op_mach_status.php', 
      type:'POST', 
      data: data_string, 
      dataType: 'json', 
      cache: false, 
      success: function(response){ 
       var newSrc = 'images/Circle2_'+class+'_25.png'; 
       console.log($('#'+mach+'.mach_status').attr('src', newSrc)); 
       $('#'+mach+'.mach_status').attr('src', newSrc); 
       $('#'+mach+'.mach_status').attr('title', status); 
       $("#mach_status_dialog").dialog('close'); 
      } 
     }); 
    }); 
});

來源

2013-10-11 12:36:15 Myt

謝謝！很好地工作。 – mend

正如您所說，只需將.click事件移入DOM就緒回調。就目前而言，您每次點擊mach_status時，都會分配一個新的點擊事件處理程序。所以，如果我點擊mach_status 10次，然後點擊一個statuses鏈接一次，你會得到10個AJAX請求。

如果只想綁定到statuses點擊當mach_status用戶點擊，添加類到元素來告訴它時，它已經準備好：

$(function() { 
    $('#mach_status_dialog').hide(); 
    $('.mach_status').click(function(){ 
     $(".statuses").addClass("ready"); 
     var mach = $(this).attr('id'); 

     $('#mach_status_dialog').dialog({ 
      modal: true, 
      draggable: false, 
      resizable: false, 
      width: 500, 
      title: 'Mach ' + mach + ' status' 
     }); 
    }); 
    $('.statuses.ready').click(function(){ 
     // Do AJAX 
    }); 
});

來源

2013-10-11 12:12:24 CodingIntrigue

並且在ajax調用之後也返回false？ – nickanor

@nickanor也許。取決於「狀態」是什麼。可能只是一個'div'，它在點擊事件後什麼都不做。 – CodingIntrigue

'statuses'是一個'div'確實 – mend

的問題是在這裏...

$('.statuses').click(function(){

每次單擊* .mach_status *元素時，都會爲所有狀態添加事件偵聽器。您可以將其更改爲

$(this).find('.statuses').click(function abc(){ 
    . 
    . 
    . 
    this.removeEventListner('click', abc); 
});

注意我如何使用命名的函數並在它們被觸發後從事件隊列中移除它們。

來源

2013-10-11 12:16:49 Sriharsha

jQuery with ajax不斷髮布多個結果

回答

相關問題