Question

我正在使用bootstrap作为不同类别的下拉列表。当用户单击列表中的一个类别时，类别选择器（下拉切换中显示的类别）应将其标题更改为单击的标题。这是一个example。

用户第一次点击某个项目时会有效。但是再次点击列表项时没有任何反应。似乎on click事件只触发一次，虽然我使用了它的委托版本（我需要它，因为DOM可能会改变）。

以下是下拉列表的HTML：

<div class="dropdown inline hide" style="display: block;"> 
  <a href="#" data-toggle="dropdown" class="dropdown-toggle">
    <span class="current-category">No Category</span><span class="caret"></span>
  </a>

  <div class="dropdown-menu scroll-pane">
    <ul>
      <li><a class="category-selection" href="#">No Category</a></li>
      <li><a class="category-selection" href="#">Category 1</a></li>
      <li><a class="category-selection" href="#">Category 2</a></li>        
    </ul>
  </div>
</div>

这是javascript：

$("body").on("click", "a.category-selection", function(e) {
  e.preventDefault();

  $(this).closest(".dropdown").find(".current-category").html($(this).html());
  $(this).closest(".dropdown-menu").dropdown('hide');

  return false;
});

Answer 1

通过下拉菜单，当您单击打开的文档时，它会自动关闭菜单。使用你提供的jsfiddle示例，删除最后两行：

$(this).closest(".dropdown-menu").dropdown('hide');
return false;

允许代码多次运行。删除“return false”只是一种很好的做法，因为你已经用e.preventDefault（）来否定了点击动作;

jquery on click仅在第一次触发

1 个答案: