Question

这个问题之前已被多次询问，我查看了其他问题，但他们提出的修正案并不适用于我。

问题是.click函数中的collapseFieldsets()处理程序被引发了两次。

这是我的初始化函数：

$(document).ready(function() {

    navigation_setup();

    collapseFieldsets();

    $('input[placeholder], textarea[placeholder]').placeholder();

    $(window).resize( function() {

        var width = $(window).width();
        $('h1').css('display', width < 1000 ? 'none' : 'block');
    } );
});

这是我的collapseFieldsets：

function collapseFieldsets() {

    $("fieldset.collapseable legend").css("cursor", "pointer");
    $("fieldset.collapseable legend label").css("cursor", "pointer");

    $("fieldset.collapsed div.fieldsetContent").hide();

    $("fieldset.collapseable legend").click(function(event) {

        var fieldsetContent = $(this).parent().find("div.fieldsetContent");

        fieldsetContent.toggle(200);
    });
}

这就是我的HTML的样子：

<fieldset class="collapseable">
    <legend><label><input checked="checked" name="ClientUpdate" type="radio" value="Current" /> Mr John Smith</label></legend>
    <div class="fieldsetContent">

        <input id="ClientCurrent_PersonId" name="ClientCurrent.PersonId" type="hidden" value="9" />

        <!-- More input elements etc -->

    </div>
</fieldset>

collapseFieldsets函数只调用一次 - 当我插入alert次调用时，它们只显示一次。

我正在使用jQuery 1.9.1，但它也发生在1.8.0。

Answer 1

该复选框触发一个传播到父级（并由其处理）的单击事件。

您是否需要将点击事件放在图例上？如果你改变了这个：

$("fieldset.collapseable legend").click(function(event){...})

到此：

 $("fieldset.collapseable input").click(function(event){
    var fieldsetContent = $(this).parentsUntil('.collapseable').parent().find("div.fieldsetContent");

    fieldsetContent.toggle(200);
 })

它会起作用。

或者，您可以在绑定到图例的事件中返回false以防止传播

jQuery .click（）被提升两次

1 个答案: