1

这个问题之前已经被问过很多次，我查看了其他问题，但他们提出的修复不适用于我。

问题是.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 上。

4

1 回答 1

3

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

你需要把点击事件放在图例上吗？如果你改变这个：

$("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 以防止传播

于 2013-02-10T07:17:27.273 回答