jQuery函数阻止在点击时添加/删除类

Question

I'm trying to have a div get a new class (which makes it expand) when being clicked, and get it back to the old class (which makes it close) when clicking on a cancel link inside that div.

<div class="new-discussion small">
    <a class="cancel">Cancel</a>
</div>

<script>
    $('.new-discussion.small').click(function() {
        $(this).addClass("expand").removeClass("small");
    });
    $('a.cancel').click(function() {
        $('.new-discussion.expand').addClass("small").removeClass("expand");
    });
</script>

Now, adding the expand class works flawlessly, but closing the panel after clicking on the cancel link only works when I remove this code:

$('.new-discussion.small').click(function() {
    $(this).addClass("expand").removeClass("small");
});

So I guess this must be preventing the second function to work, but I really can't figure out why.

Any ideas? Thanks!

Answer 1

Try this

$('a.cancel').click(function() {
    $('.new-discussion.expand').addClass("small").removeClass("expand");
    return false;
});

Reason may be your click event is getting propagated to parent which is also listening to click event.

Answer 2

Since your a element is inside the .new-discussion element, when you click on the a , it also fires the click event on the parent element because the event is bubbling up.

To fix it, you can stop the propagation of the event by calling e.stopPropagation(); . That will prevent any parent handlers to be executed.

$('a.cancel').click(function(e) {
    e.stopPropagation();
    $('.new-discussion.expand').addClass("small").removeClass("expand");
});

Answer 3

Since the link is inside the <div> , it's using both click methods at once. It might help to do a check to see if the container is already open before proceeding:

<script>
    $('.new-discussion.small').click(function() {
        if ($(this).hasClass("small")) {
            $(this).addClass("expand").removeClass("small");
        }
    });
    $('a.cancel').click(function() {
        $(this).parent('.expand').addClass("small").removeClass("expand");
    });
</script>