jQuery的點擊功能不能在第一個孩子的工作

Question

jQuery的點擊功能無法正常工作在李的第一個孩子變成「.contracted」作爲jsFiddle

<ul class="clearfix"> 
    <li class="contracted"> 
    <a href="#"> 
     <span>L1<b>: Recognize a digit represents 10 times the value</b></span> 
    </a> 
    </li> 
    <li class=""> 
    <a href="#"> 
     <span>L2<b>: Recognize a digit represents 10 times the value</b></span> 
    </a> 
    </li> 
</ul> 

我試圖在底部移動點擊的功能，以及。但它不起作用。完整的工作示例在jsFiddle中給出。

$('.contracted').click(function() { 
    $(this).parent().attr('class', 'expanded'); 
    $('ul.expanded li.activeLesson').attr('class', 'selected'); 
    $('ul.expanded li:not(.selected)').attr('class', ''); 
}); 

Answer 1

你$('.contracted').click(...)代碼會綁定一個單擊處理程序與目前該類任何元素代碼運行 - 在具有類後加入其他的元素，這將不會自動工作。如果你想讓它通過.on()具有contracted類在點擊的時候任何li元素使用委派的事件處理程序設置上工作：

$('ul').on('click', 'li.contracted', function() { 
    ... 
}); 

此結合單擊處理所有ul元素，但隨後當發生點擊時，jQuery會檢查點擊的項目是否與第二個參數中的選擇器相匹配的ul的後代，並且只有在調用該函數時才調用該函數。