Adding click handler for nested elements in a div

Question

I'm trying to add the same click event to two nested elements inside a div. The HTML structure is like this:

<li class="car>
    <div class="header">
        <h2>Car of the Day</h2>
    </div>
    <div class="car-wrap">
        Content...
    </div>
    <div class="other-content">
        Contains other links and content
    </div>
</li>

The <h2> in the header and the div.car-wrap content are the clickable elements. I cant put the click event on the li.car as there are other link elements on the div.other-content. Also the structure of the HTML may vary depending on the type of result/car. For example in some the div.header may not be present.

So far I have this:

$('#results').on('click', 'li.car:not(".unpinned").car-wrap', function (e) { ...

Which works when I click on the div.car-wrap. But I don't want to replicate it just for the <h2>. Also I am trying to avoid adding another class to the markup if possible. Any suggestions?

Rory McCrossan · Accepted Answer · 2016-10-31 16:39:33Z

3

You can separate selectors in a single jQuery object with a comma:

$('#results').on('click', 'li.car:not(".unpinned") .car-wrap, li.car:not(".unpinned") .header h2', function (e) { 
   // your code...
});

Also note the space between the :not() and the .car-wrap selector, as it's a descendant.

answered Oct 31, 2016 at 16:39

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Marcos Pérez Gude Over a year ago

Yeah, I think the same when I read the li.car:not(.unpinned).car-wrap without whitespace between

Jose the hose Over a year ago

Thanks. Did not know you can add them like that

Collectives™ on Stack Overflow

Adding click handler for nested elements in a div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related