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不断发布多个结果

回答

相关问题