0

我有一些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()函数。

什么可能导致这种相当奇怪的行为？

4

1 回答 1

4

解决方案：不要将事件监听器附加到label包含input.

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

请将您的代码更改为：

$(function() {

    getCount();

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

});
于 2012-11-06T11:15:42.877 回答