jQuery $ .ajax运行两次

Question

我有一些运行onClick的ajax用于某个类的复选框，但由于某种原因我的ajax代码被调用两次，它似乎也改变了复选框的值打电话，但不在页面上。

继承我的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();
            }
        }
    });
}

php页面返回一个数字或“n / a”。 单击其中一个复选框（例如Bar2）时，我在控制台中看到两个请求沿着这些行发出了一些内容

.../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.

因此发送的第一个请求是正确的，但第二个请求会将1还原为0来取消更改，因此返回的数字不正确。

然而，复选框没有任何不同，检查它是否保持检查，反之亦然。

还有其他代码，但没有其他任何代码调用getCount()函数。

可能导致这种奇怪行为的原因是什么？

Answer 1

解决方案：请勿将事件监听器附加到label，其中包含input。

好的，这里的问题是当label触发一个事件，其中有一个input时，input也会触发相同的事件，从而产生两个事件。因此，最好将事件附加到input而不是label，其中包含input。

请将您的代码更改为：

$(function() {

    getCount();

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

});