jquery - 如何单击动态创建的元素以在 jQuery 中切换回撤？

Question

我有这个 jQuery 函数，我在我的网站的各个地方都在使用它。它适用于li具有类的所有元素，dropdown除了一个包含许多span通过 jQuery 动态更新的元素的元素。

当秒表运行时，我可以单击锚文本本身（“秒表”）来切换下拉菜单，但是当我单击其中一个span元素时，什么也没有发生。

如何解决这个问题？

$(function() {
  $('.dropdown').on('click', 'a', function(event) {
    var menu = $(this).siblings('ul');
    menu.toggle();
    if (menu.is(':visible')) {
      $(this).addClass('expanded');
    } else {
      $(this).removeClass('expanded');
    }
    event.stopPropagation();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown" id="stopwatch">
    <a class="collapsible">Stopwatch
      <span id="clock">
        <span id="hours">00</span>
        <span id="minutes">00</span>
        <span id="seconds">09</span>
        <span id="milliseconds">120</span>
      </span>
    </a>
    <ul style="display: none;">
      <!-- omitted for brevity -->
    </ul>
  </li>
</ul>

标签： jquery