div内の入れ子要素のクリックハンドラを追加

Question

div内の2つのネストされた要素に同じクリックイベントを追加しようとしています。 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> 

ヘッダとdiv.car-wrapコンテンツに<h2>がクリック可能な要素です。他のリンク要素がdiv.other-contentにあるので、私はクリックイベントをli.carに入れません。また、HTMLの構造は、結果/車のタイプによって異なる場合があります。例えば、一部ではdiv.headerが存在しないことがあります。

は、これまでのところ私はこれを持っている：

私は div.car-wrap上でクリックしたときに動作します

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

。しかし私は<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セレクタとの間のスペースに注意してください。