javascript - 为什么 .click() 和 ("click") 在 Bootstrap 折叠按钮上的行为不同？

Question

我正在尝试将点击事件添加到将执行某些操作的 Bootstrap 按钮，然后通过返回 false 刷新事件。这意味着我根本不希望自动发生的 Bootstrap 效应发生。我将根据某些条件在点击事件中以编程方式控制它。这意味着我需要在完成事件后刷新事件，这样点击时发生的 Bootstrap 崩溃就永远不会发生。

我的问题如下。如果我使用 $("my-button").click(...);这会在切换折叠之前捕获事件，我可以在完成我想要的操作后刷新事件。

但是我需要使用 on("click", ...);因为我需要通过动态添加的按钮发生此事件。

我的问题是 on("click", ...);不像 .click(...) 那样工作，当它捕捉到事件时，隐藏的 div 已经折叠，这是我不想要的。

我做了一个简单的例子来说明我的问题:https://jsfiddle.net/vo1npqdx/368/ .

$(document).ready(function() {
  $("#collapse-button").click(function() {               
    debugger;
    //Do my stuff
    return false; // successfully prevents bootstrap animation.
  });

   $(document).on("click", "#collapse-button", function () {
    debugger;
    //Do my stuff
    return false; // doesn't prevent animation
   });
   // These catch the click event at different times!
});

对于这种情况是否有任何可能的解决方法？

Answer 1

好吧，你很幸运，因为看起来 bootstrap 使用文档来捕获事件，这意味着你可以在此之前捕获它，例如使用 body 元素，但最好是捕获它更接近触发事件的元素，例如。在不会改变的包装上。

$("#wrapperthatwontchange").on("click", "#collapse-button", function() {
    return false;
  });

https://jsfiddle.net/Lbqpr7pm/