0

特定のクラスのチェックボックスに対して実行されるajaxが少しありますonClickが、何らかの理由でajaxコードが2回呼び出され、呼び出しのチェックボックスの値も変更されているようですが、ページにはありません。

これが私のhtmlです

<label class="facilities mainfac"><input name="Foo1" id="Foo1" type="checkbox" value="1">Foo1</label>
<label class="facilities mainfac"><input name="Bar2" id="Bar2" type="checkbox" value="1">Bar2</label>
<label class="facilities mainfac"><input name="Foo3" id="Foo3" type="checkbox" value="1">Foo3</label>
<label class="facilities mainfac"><input name="Bar4" id="Bar4" type="checkbox" value="1">Bar4</label>
<label class="facilities mainfac"><input name="Foo5" id="Foo5" type="checkbox" value="1">Foo5</label>
<label class="facilities mainfac"><input name="Bar6" id="Bar6" type="checkbox" value="1">Bar6</label>
<label class="facilities mainfac"><input name="Foo7" id="Foo7" type="checkbox" value="1">Foo7</label>
<label class="facilities mainfac"><input name="Bar8" id="Bar8" type="checkbox" value="1">Bar8</label>

次に、以下を使用してajaxを実行します。

$(function() {

    getCount();

    $('.mainfac').on('click', function() {
        getCount();
    });

});

そして最後に、ajaxリクエストに関連する関数があります

function urlStringFormChoices()
{
    var urlVars = '';

    urlVas = urlVas + '&Foo1=' + ($('#Foo1').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Bar2=' + ($('#Bar2').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Foo3=' + ($('#Foo3').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Bar4=' + ($('#Bar4').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Foo5=' + ($('#Foo5').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Bar6=' + ($('#Bar6').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Foo7=' + ($('#Foo7').is(':checked') ? '1' : '0');
    urlVas = urlVas + '&Bar8=' + ($('#Bar8').is(':checked') ? '1' : '0');

    return urlVas;
}

function getCount()
{
    var data = urlStringFormChoices();
    // show loading info to the user
    $('#c-bookable').hide();
    $('#c-loader').show();
    $.ajax({
        url:  '/inc/get-count.php',
        data: data,
        type: 'get'
    }).done( function(count) {
        $('#c-loader').hide();
        if(count != "n/a")
        {
            if($('#bookable').is(':checked')) {
                $('#c-bookable').html('<span class="c-bookable-count">' + count + '</span> available').show();
            } else {
                $('#c-bookable').html('<span class="c-bookable-count">' + count + '</span>')).show();
            }
        }
    });
}

数値または「n/a」を返すphpページ。Bar2などのチェックボックスの1つをクリックすると、コンソールに2つのリクエストがこれらの行に沿って何かを行ったことがわかります。

.../get-count.php?Foo1=0&Bar2=1&Foo3=0&Bar4=0&Foo5=0&Bar6=0&Foo7=0&Bar8=0.

.../get-count.php?Foo1=0&Bar2=0&Foo3=0&Bar4=0&Foo5=0&Bar6=0&Foo7=0&Bar8=0.

したがって、送信された最初の要求は正しいですが、2番目の要求は1を0に戻し、変更をキャンセルするため、誤った番号を返します。

ただし、チェックボックスの動作に違いはなく、チェックボックスをオンにするとチェックボックスがオンのままになり、その逆も同様です。

他のコードが点在していますが、他にgetCount()関数を呼び出すものはありません。

このかなり奇妙な振る舞いを引き起こしている可能性があるのは何ですか？

4

1 に答える 1

4

解決策：イベントリスナーをにアタッチしないでください。これには。labelが含まれますinput。

さて、ここでの問題は、内部にlabelあるイベントがトリガーされたときに、同じイベントもトリガーされ、それによって2つのイベントが生成されることです。したがって、を含む、ではなく、イベントを添付することをお勧めします。inputinputinputlabelinput

コードを次のように変更してください。

$(function() {

    getCount();

    $('.mainfac input').on('click', function() {
        getCount();
    });

});
于 2012-11-06T11:15:42.877 に答える