jquery - 什么会使 jQuery 事件委托不起作用？

Question

我在 body 标记内有以下标记，在我的脚本加载之前：

<ul class="wizard-menu">
 <li class="top">
  <div class="top-category custom-select">Select Category</div>
  <ul class="menu-main" style="display: none;">
   <li id="top-2" class="menu-expense"><a href="#" id="category-2" class="wizard-category-name">Menu Item</a></li>
  </ul>
 </li>
</ul>

在页面上加载以下作品并打印到控制台：

$(function() {  
 $(".wizard-category-name").click(function() {
  console.log("Non-Delegated");
 });
});

但这不会：

$(function() {  
 $("body").on("click", ".wizard-category-name", function() {
  console.log("Delegated");
 });
});

我在整个代码中都在使用这样的委托，但只有这个正在破坏，这让我觉得这很愚蠢......有什么想法吗？

Answer 1

如果未触发委托事件，则很可能另一个事件正在停止委托事件所依赖的传播。查找event.stopPropagation和/或return falsein 元素，它们是您尝试跟踪事件的元素的祖先。