jqueryでのイベント委任の追加

Question

jQueryを初めて使用しました。イベントの委任に関する質問があります。 は、ここで以下のjavascript本から一連のコードです

HTML：

<ul class="accordion"> 
    <li> 
     <button class="accordion-control">Classics</button> 
     <div class="accordion-panel"> 
     <p>If you ...</p> 
     </div> 
    </li> 
    <li> 
     <button class="accordion-control">The Flower Series</button> 
     <div class="accordion-panel"> 
     <p>Take your ...</p> 
     </div> 
    </li> 
    <li> 
     <button class="accordion-control">Salt o' The Sea</button> 
     <div class="accordion-panel"> 
     <p>Ahoy! ....</p> 
     </div> 
    </li> 
    </ul> 

のjQuery：

$('.accordion').on('click', '.accordion-control', function(e){ 
    e.preventDefault();     
    $(this).next('.accordion-panel')    
     .not(':animated')     
     .slideToggle();      
}); 

我々はすでに '.accordion' を選択しているので、私は思っていました、なぜ「.accordion-control」を選択する必要があるのでしょうか？そして、私は式が$(selector).on(event,function)であるべきだと考えていたので、イベント後に別のセレクタがありますか？

Answer 1

最初のaccordionは祖先を指します。バインディングは、イベントにあります。その1つは、accordion-controlという子孫です。 祖先は、子孫がまだ存在しない場合に使用されます（たとえば、accordion-controlがスクリプトを使用して作成され、ページの読み込み（HTML内）から存在しない場合） - 存在しない要素にイベントをバインドできません。 http://api.jquery.com/on/