Javascript 使用ajax的JQuery不断发布多个结果

我在一个页面上有许多显示机器状态的图像。如果单击图像，则会打开模式窗口，您可以选择“新建状态”。状态通过ajax发送到数据库。如果我尝试更改另一台机器的状态，则前一台机器的状态也会更改。我所接触的每个状态都会作为我选择的最后一个状态被重新发送

它以某种方式创建了一系列我已经更改过的机器，每次更改都会发布所有这些机器。刷新页面将清空阵列

我想我需要在php中使用类似于

unset

的东西，或者将内部click函数移到first click函数之外

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

---

正如您所说，只需将

事件移动到DOM就绪回调中。目前，每次单击
mach_状态
，都会分配一个新的单击事件处理程序。因此，如果我点击
mach_status
10次，然后点击一次
status
链接，您将收到10个AJAX请求

如果您只想绑定到
状态
当用户单击
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
    });
});

问题就在这里

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

每次单击*.mach_status*元素时，它都会为所有状态添加事件侦听器。您可以将此更改为

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

请注意，我是如何使用命名函数的，并在它们被激发后将其从事件队列中删除。
以及
在ajax调用之后返回false
？@nickanor maybe。取决于
状态是什么。可能只是一个
div
，它在单击事件后什么也不做。
status
是一个
div
谢谢！效果很好。
$(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');
            }
        });
    });
});