jQuery click event when an element is inside another element

Question

I have a problem with the jQuery click event when an element is inside another element. The code I am using is similar to the following:

<div class="a" id="a">
  <a class="b" id="b"></a>
</div>

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  ...do something...
});

When I click on the tag class="b" it returns the encapsulated class="a" id instead of the id of class="b". How do I code it so that when I click on class="a" or class="b" it returns the correct corresponding id value?

Ilia Choly · Accepted Answer · 2013-03-09 17:28:17Z

5

you have to stop it from bubbling.

$(".a,.b").click(function() {
  var current_id = $(this).attr("id"); 
  alert(current_id);
  // ...do something...
  return false; // <-- stop propagation
});

demo: http://jsfiddle.net/Q9njP/

EDIT: better way

$(".a,.b").click(function(event) {
  var current_id = event.target.id; 
  alert(current_id);
  // ...do something...
  event.stopPropagation();
});

demo: http://jsfiddle.net/xMGgA/1/

edited Mar 9, 2013 at 17:28

answered Nov 7, 2011 at 22:32

Ilia Choly

18.6k14 gold badges95 silver badges166 bronze badges

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

4 Comments

Felix Kling Over a year ago

You should better use event.stopPropagation().

Ilia Choly Over a year ago

@FelixKling in the question he wasn't using the event parameter. I just gave a working example with the least amount of changes. You are definitively correct though.

Kevin Over a year ago

'return false;' worked. Thank you. @FelixKling how would event.stopPropagation() work?

Felix Kling Over a year ago

@Kevin: have a look at the second example in this answer... the difference is that return false also prevents the default action of the browser which is not necessarily desired. stopPropagation is more expressive as well.

lonesomeday · Accepted Answer · 2011-11-07 22:38:11Z

3

You need to use the event target. This is the element where the event originated:

$(".a").click(function(event) {
  var current_id = event.target.id;
  alert(current_id);
  ...do something...
});

Note that this is the same as $(event.target).attr('id'), but cleaner and faster, and that I've removed the reference to .b since all events fired on .b will be matched on .a anyway.

See jsFiddle example.

edited Nov 7, 2011 at 22:38

answered Nov 7, 2011 at 22:29

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

3 Comments

lonesomeday Over a year ago

@ManseUK That doesn't do anything because you haven't added event as a parameter.

lonesomeday Over a year ago

But yes, @FloydThreepwood, it would fire twice. The handler should only be on the parent element, although whether this is the correct solution would depend on the actual real-world situation.

lonesomeday Over a year ago

@ManseUK Yes, but it's an unnecessary change, and a bad one unless it's necessary. My change is probably the nicest solution for the abstract case.

Mukesh Kalgude · Accepted Answer · 2017-12-12 06:38:59Z

0

You can also create this type of event

$(document).on('click','#a>.b',function(){
   var current_id = $(this).attr("id"); 
   alert(current_id);
});

answered Dec 12, 2017 at 6:38

Mukesh Kalgude

4,8542 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery click event when an element is inside another element

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related