为div中的嵌套元素添加单击处理程序

Question

我正在尝试将同一点击事件添加到div内的两个嵌套元素中。 HTML结构是这样的：

<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>

标题中的<h2>和div.car-wrap内容是可点击的元素。我无法将点击事件放在li.car上，因为div.other-content上还有其他链接元素。 HTML的结构也可能根据结果/汽车的类型而有所不同。例如，某些div.header可能不存在。

到目前为止，我有这个：

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

单击div.car-wrap时有效。但我不想仅仅为<h2>复制它。另外，我试图避免在可能的情况下向标记添加另一个类。有什么建议吗？

Answer 1

您可以使用逗号分隔单个jQuery对象中的选择器：

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

另请注意:not()和.car-wrap选择器之间的空格，因为它是后代。