jQuery click function exception

Question

I am displaying a container <div class="expand"> that - when clicked on - expands the section below it:

HTML:

<div class="expand">
    <div class="container1">
         <div class="container2">
             <a class="view">View</a>
             <a class="download">Download</a>
         </div>
    </div>
</div>

<section class="hidden">
...
</section>

jQuery:

$('.expand').click(function () {

   var $this = $(this);
   $this.next().show();

});

As you can see, there also a "Download" button as a child element of the <div class="expand">. This Download button should be the only element in this very container that does not trigger the said section to be shown.

So I would like to do something like this:

$('.expand').not(".download").click(function () {
...
});

or

$('.expand').except(".download").click(function () {
...
});

I think you misunderstood the question. I would like the whole <div class="expand"> container EXCEPT FOR the <a class="download"> button to trigger the function. — Frank
– Frank, Commented Apr 29, 2015 at 14:25

Matthew Rapati · Accepted Answer · 2015-04-29 14:45:58Z

5

You can use event.stopPropagation() as well:

$('.download').click(function(event) {
    event.stopPropagation();
}

$('.expand').click(function () {
    ...
});

This will stop the event from moving up in the DOM to parents, and triggering their event handlers as well.

edited Apr 29, 2015 at 14:45

answered Apr 29, 2015 at 14:28

Matthew Rapati

5,6964 gold badges31 silver badges49 bronze badges

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

Comments

Balachandran · Accepted Answer · 2015-04-29 14:27:57Z

3

use e.target to check clicked element is download or not

$('.expand').click(function (e) {

    if (!$(e.target).is(".download")) {
        var $this = $(this);
        $this.next().show();
    }

});

edited Apr 29, 2015 at 14:27

answered Apr 29, 2015 at 14:25

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

3 Comments

Balachandran Over a year ago

just i posted .. i ll explain 2min

Frank Over a year ago

would make total sense to me, but it does not seem to work. It seems to keep the function from executing in the first place. Thanks though!

Balachandran Over a year ago

Then you have to use return if ($(e.target).is(".download")) { return; }else{}

Mortimer Johansson · Accepted Answer · 2017-01-19 20:40:09Z

2

You'll need to include a function at the end of the code:

It's here: event.stopPropagation()

Please try, it will work!

answered Jan 19, 2017 at 20:40

Mortimer Johansson

362 bronze badges

Comments

hoceyn · Accepted Answer · 2015-04-29 14:28:18Z

1

you can add stoppropagation() function after your code.

$('.expand').click(function (event) {   var $this = $(this);   $this.next().show();

event.stopPropagation(); });

answered Apr 29, 2015 at 14:28

hoceyn

711 silver badge8 bronze badges

Comments

Shaunak D · Accepted Answer · 2015-04-29 14:28:23Z

1

You need event.stopPropagation(). This stops the event from bubbling or propagating to the children.

$('.expand').find(".download").click(function (event) {
     event.stopPropagation()
})

answered Apr 29, 2015 at 14:28

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Collectives™ on Stack Overflow

jQuery click function exception

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related