1

マシンのステータスを示すページに多くの画像があります。画像をクリックするとモーダルウィンドウが開き、新しいステータスを選択できます。ステータスは ajax 経由で DB に送信されます。別のマシンのステータスを変更しようとすると、以前のマシンのステータスも変更されます。私が触れたすべてのステータスは、最後に選択したステータスとして毎回再送信されます。

それはどういうわけか私が変更したマシンの配列を作成し、変更するたびにそれらすべてを投稿します。ページを更新すると、配列が空になります。

私unsetはphpで似たようなものを使うか、内側のクリック関数を最初のクリック関数の外に移動する必要があると思います。

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

3 に答える 3

1 
$(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-11T12:36:15.360 に答える
1

あなたが言うように、.clickイベントを DOM Ready コールバックに移動するだけです。現状では、 をクリックするたびにmach_status、新しいクリック イベント ハンドラーが割り当てられます。したがって、リンクをmach_status10 回クリックしてからstatusesリンクを 1 回クリックすると、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-11T12:12:24.293 に答える
0

問題はここで...

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

*.mach_status* 要素をクリックするたびに、すべてのステータスのイベント リスナーが追加されます。これを次のように変更できます

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

名前付き関数をどのように使用し、それらが起動されたらイベント キューから削除するかに注意してください。

于 2013-10-11T12:16:49.483 に答える