CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

onclick select child element

I have a div that can have many child elements. This super div has a class of .clickable, and the child divs also have a .clickable class. I also have a .click event handler for anything with class .clickable.

However, every time I click inside the super div, only the super div gets a click event triggered. The child divs are never being targeted. How do I get around this?

html
<div class="super clickable">
 <div id="child-1" class="child clickable"></div>
 <div id="child-2" class="child clickable"></div>
</div>

js
$('.clickable').click(function() {
 $(this).css('border', '1px solid red');
});

Upvotes: 2

Views: 3819

Answers (3)

the digitalmouse
the digitalmouse

Reputation: 222

For those cases where you don't know (or don't care) who the children are, you can try:

$(".super div").click(function () {
    // do stuff
});

Or, using jQuery's .children() method:

$(".super").children().click(function () {
    // do stuff
});

And if you need to target a specific child element:

// targets second child element
$(".super div").eq(2).click(function () {
    // do stuff
});

could also do $(".super div:first") or $(".super div:last")  
or even $(".super div:last-child") depending on your needs

Then you don't need to know what the children are named. You essentially access them directly.

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

even if there is a nice answer by josh, I would say dont use same classes to trigger different events.

IMO CSS classes can be nested , if the purpose is to style elements. if there are events to be bound based on classes, better not nest them, try different classes for parent and children

why:

You used .clickable for both parent and child, So I guess you will further require to attach another event for the parent as well.

See this:

$('.clickable > .clickable').click(function() {
 $(this).css('border', '1px solid red');
});

This will work like a charm, but consider a possibility that you require to add another event to the parent div itself and you do something like

$('.clickable ').click(function() {
// make some operation on parent
});

This will also trigger click event on the children(because of-course they have same class) while you need parent to be clicked.

So you can do something like this, which would be a better practice

<div class="super">  // removed the clickable class from parent
 <div id="child-1" class="child clickable"></div>
 <div id="child-2" class="child clickable"></div>
</div>

js
$('.clickable').click(function() {
 $(this).css('border', '1px solid red');
});

Thats it.. and then you will not mess up your code in future

Edit:

Now as you have used double classes and as LinkinTED states in comment below: you can do something like $(.child.clickable) and $('.super.clickable') to differentiate the events for parent and children, but truely speaking this makes your class clickable worth of no use. So the key is simply avoid nesting the same classes if you want to attach events on them.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240868

You could use the child selector > in order to select direct .clickable elements within .clickable elements:

$('.clickable > .clickable').click(function() {
 $(this).css('border', '1px solid red');
});

Upvotes: 3

Related Questions