JQuery's .click triggering on child elements

Question

I have a page with multiples divs like this

<div class="bigbox">
    <a href="http://www.somestuff.com">some stuff</a>
    more elements
</div>

I'm trying to make each div open the link inside it when clicked and tried like that:

$('div.bigbox').each(function(){
    $(this).click(function(){
        window.open($(this).find('a').attr("href"));
})})

But when clicking on the actual link, it will open it twice. Any suggestion to not have .click trigger when clicking on the link inside my div?

user1106925 · Accepted Answer · 2012-01-18 00:06:37Z

2

By open twice, I assume you meant that the link is followed in the original window as well as the new window.

Just add return false, or e.preventDefault() to stop this.

$('div.bigbox').click(function(e){
    e.preventDefault()
    window.open($(this).find('a').attr("href"));
});

answered Jan 18, 2012 at 0:06

user1106925

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

Comments

ioncache · Accepted Answer · 2012-01-18 00:06:42Z

2

You could do something like:

$('div.bigbox').find('a').click(function(e) {
    e.preventDefault();
});

That would prevent any tags iniside .bigbox divs from firing their click events.

answered Jan 18, 2012 at 0:06

ioncache

1113 bronze badges

Comments

Francis Lewis · Accepted Answer · 2012-01-18 00:13:46Z

1

I believe you're pretty close with your code. Try this:

$('div.bigbox').click(function()
{
    window.open($(this).find('a').attr('href'));
    return false;
});

The return false should keep it from opening more than once, so give that a try and see how it works.

edited Jan 18, 2012 at 0:13

answered Jan 18, 2012 at 0:06

Francis Lewis

8,9889 gold badges58 silver badges68 bronze badges

1 Comment

Charles Over a year ago

Tried this one first and it indeed works. I had only tried adding return false to the a element to try to block it when javascript is enabled, but that was totally blocking the link.

elijah · Accepted Answer · 2012-01-18 00:08:11Z

1

you want your handler to be called when the div is clicked, but not when the link inside the div is called?

how about adding

$('div.bigbox').each(function( event ){
  $(this).click(function(){

    // only perform the action if the div itself was clicked
    if ( event.target == this ) {
      window.open($(this).find('a').attr("href"));
    }
  })
})

answered Jan 18, 2012 at 0:08

elijah

2,9241 gold badge19 silver badges23 bronze badges

Comments

skimberk1 · Accepted Answer · 2012-01-18 00:06:44Z

0

In my opinion, you'd be better off just doing this:

<a href="http://www.somestuff.com">
    <div class="bigbox">
        More elements
    </div>
</a>

If you'd rather use javascript, you can always just do this:

$('div.bigbox').click(function(e)
{
    window.open($(this).find('a').attr('href'));
    e.preventDefault();
});

answered Jan 18, 2012 at 0:06

skimberk1

2,0943 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

JQuery's .click triggering on child elements

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related