Unwanted recursion - how to avoid child click event from passing to parent in jquery?

Question

I have a some elements, roughly like this:

<div>
    <a>
<div>

When a user clicks anywhere on the div, I want the a element to be clicked - for usability purposes.

Simple right? So I wrote this:

$('div.class').click(function(){  
    $('a.class', this).click();
    console.log('clicked'); 
});

Trouble is, this clicks the a element alright, but the event propagates to the div, which clicks it, which clicks the a, which... well you can see where it's going.

I cooked up a sample on JSfiddle here but it doesn't show the console log. So if you click, Firebug doesn't show anything. but my local site sets Firebug crazy with logs (clicked) so much that in the end script gets killed saying too much recursion on this page

How do I stop this recursion?

Yes I know, I know that I can use window.location for this purpose, but clicking the link does some extra work and also uses window history for browsers, so I really want to click that vicious a without making it click its Dad. Or Mom. Or whatever that div is.

PLEASE READ

Since everyone is suggesting the same thing over and over again, and it's not working, please take a look this JSfiddle. Try it and see if it works before you answer. When you click on a div, Google should load up. That's what I'm looking for.

No Worries. I was just shooting from the hip. That's what I get — Brig, Apr 19 '11 at 17:54

score 4 · Accepted Answer · edited Dec 04 '21 at 17:36

4

If this is is your markup:

<div>
    <a></a>
</div>

...all you will need to do is in your css do something like:

div a { display: block};

The anchor element will then stretch and occupy all the available space in the parent div. However, if some other elements exist within that div, you could do:

$('a.class').click(function(event){
   event.stopPropagation();
   alert('you clicked on me');
});

$('div.class').click( function () {
  $(this).children('a.class').trigger('click');
});

edited Dec 04 '21 at 17:36

marsnebulasoup

2,530
2
16
37

answered Apr 19 '11 at 18:12

Ady Ngom

1,284
2
10
12

Hi, I tried this, its not doing anything. Can you try this on jsfiddle and see if you can get it to work? – iamserious Apr 20 '11 at 08:25
It worked for me of course you have to add the class="class" for both the div and the a tag, check the result on jsfiddle: http://jsfiddle.net/wB7uq/ – Ady Ngom Apr 20 '11 at 18:34
and on the second version below i added css so you can see that the event get triggered if you click on the anchor or the parent div, check it out: http://jsfiddle.net/wB7uq/2/ – Ady Ngom Apr 20 '11 at 18:44
excellent! I was trying to stop propagation from div itself, I see the code is slightly restructured and the propagation has to be stopped from child! Thank you very much! cant tell you how happy I am to have learnt this behaviour. – iamserious Apr 21 '11 at 08:24

score 3 · Answer 2 · edited Dec 04 '21 at 17:34

3

Use the event.stopPropagation() method.

edited Dec 04 '21 at 17:34

marsnebulasoup

2,530
2
16
37

answered Apr 19 '11 at 17:20

Sang Suantak

5,213
1
27
46

hi, says event is undefined. I am googling up on event, but can you please try on jsfiddle to see if you can get it to work? many thanks – iamserious Apr 19 '11 at 17:24
Hi, got it to work (I mean, got stopPropagation to work - i had to add event to function) - but it doesn't do anything either. – iamserious Apr 19 '11 at 17:30
stopPropagation only works on ancestor events. It will stil try and fire because you are referring to the event itself. You need to restructure your code. – GrahamJRoy Apr 19 '11 at 17:44

score 1 · Answer 3 · edited Dec 04 '21 at 17:33

1

How about this?

$('selector').attr('onclick')()

edited Dec 04 '21 at 17:33

marsnebulasoup

2,530
2
16
37

answered Apr 19 '11 at 17:39

tomfumb

3,669
3
34
50

I think actually TheSuperTramp's solution is a more sensible approach to what I am suggesting – tomfumb Apr 19 '11 at 18:00

score 1 · Answer 4 · edited Dec 04 '21 at 17:36

1

Instead of using the click event on the child node, just set the browser location to the href value

$('div.class').click(function(){
  location = $(this).find('a').attr('href');
});

edited Dec 04 '21 at 17:36

marsnebulasoup

2,530
2
16
37

answered Apr 20 '11 at 14:08

GrahamJRoy

1,603
5
26
56

score 0 · Answer 5 · edited Dec 04 '21 at 17:34

0

$('div.class').click(function(event){  
    event.stopPropagation();
    $('a.class', this).click();
    console.log('clicked'); 
});

You need to add the event argument and a stopPropagation method to the handler.

edited Dec 04 '21 at 17:34

marsnebulasoup

2,530
2
16
37

answered Apr 19 '11 at 17:34

sv_in

13,929
9
34
55

tried that, doesn't do anything. Tried ``event.preventDefault()`` as well. no luck :( – iamserious Apr 19 '11 at 17:42
can't you make the a spread over the div. that way when the user clicks on the div, it gets clicked on the link. – sv_in Apr 19 '11 at 18:09

Unwanted recursion - how to avoid child click event from passing to parent in jquery?

5 Answers5