jQuery Click函数不适用于第一个孩子

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(...)代码将在代码运行时将点击处理程序绑定到该类的任何元素上-这将不会自动在以后添加了该类的其他元素上起作用。 如果您希望它在单击时对具有contracted类的任何li元素起作用，请使用通过.on()设置的委托事件处理程序：

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

这会将click处理程序绑定到所有ul元素，但是当发生单击时，jQuery会检查被单击的项是否是ul的后代，该后代与第二个参数中的选择器匹配，并且仅在匹配时调用您的函数。