CODEWITHSUNDEEP
jqueryevents
Dai
Dai

Reputation: 155250

jQuery .click() being raised twice

This question has been asked numerous times before and I looked at the other questions, but their proposed fixes didn't apply to me.

The problem is the .click handler in the collapseFieldsets() function is being raised twice.

Here is my init function:

$(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');
    } );
});

This is my 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);
    });
}

And this is what my HTML looks like:

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

The collapseFieldsets function is only called once - when I insert alert calls they only appear once.

I'm using jQuery 1.9.1, but it also happens with 1.8.0.

Upvotes: 1

Views: 444

Answers (1)

gurch101
gurch101

Reputation: 2064

The checkbox triggers a click event that is propagated to (and handled by) the parent.

Do you need to put the click event on the legend? if you change this:

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

to this:

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

    fieldsetContent.toggle(200);
 })

It'll work.

Alternatively, you can return false in the event bound to the legend to prevent propagation

Upvotes: 3

Related Questions