jQuery click function firing at the same time

Question

I have two click functions that seem to be firing at the same time. I need the second to only happen after the first.

So the first slideDown is working fine but once that has finished I want it to stop, and then the slideUp to happen own the .close class is clicked.

$(".trigger").click(function() {
    $(".mobileWrap").slideDown(500);
    $(".mainContentBg").addClass("height", 1000);
    $(".trigger").text("Read less");
    $(".trigger").addClass("close");
    $(".close").removeClass("trigger");
});
$("body").on("click", ".close", function() {
    $(".mainContentBg").removeClass("height", 1000);
    $(".mobileWrap").slideUp(1000);
    $(".trigger").addClass("trigger");
    $(".trigger").text("Read more");
});

http://jsfiddle.net/6hvZT/648/

Thanks

You must stop the click event form bubbling up to the body click event — QBM5
– QBM5, Commented May 11, 2015 at 16:09
@haim770 it can if you're using jQueryUI: api.jqueryui.com/addclass — Rory McCrossan
– Rory McCrossan, Commented May 11, 2015 at 16:11
@RoryMcCrossan, The question isn't tagged jQueryUI, but didn't know that anyway. — haim770
– haim770, Commented May 11, 2015 at 16:12

Shaunak D · Accepted Answer · 2015-05-11 16:18:41Z

1

Problem with your code :

As the class close is being added, the delegated click is being triggered.

Updated Fiddle

If your wish is to toggle More-Less;You can just use toggleClass and slideToggle instead of two different click events,slideUp/slideDown and addClass/removeClass.

Below is the shortened code.

$(".trigger").click(function() {
    $(".mobileWrap").slideToggle(500);
    $(".mainContentBg").toggleClass("height", 1000);
    $(".trigger").text(function(){
        return this.innerText === "Read less"? "Read more":"Read less"
    });
});

Also, if you have multiple such instances, inside the handler it is better to use $(this) instead of $('.trigger')

edited May 11, 2015 at 16:18

answered May 11, 2015 at 16:11

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery click function firing at the same time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related