JavaScript click（）破坏了Bootstrap按钮的单击动画

Question

我正在使用Bootstrap 4进行样式设置。我的页面上有一个按钮，希望用户能够通过击键来触发。我添加了以下Javascript，它可以正常工作。<script>  document.addEventListener('keyup', function (event) {    if (event.defaultPrevented) {      return;    }    var key = event.key || event.keyCode;    if (key === 'j' || key === 'KeyJ' || key === 74) {      document.getElementById("myButton").click();    }});</script>HTML只是<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>它看起来就像Bootstrap设置的任何按钮一样。问题。通常，当您按下按钮时，Bootstrap会在点击后播放一个小动画。但是，当单击由JavaScript触发时（即，用户使用了按键），则不会发生该动画，并且用户也不会收到有关单击按钮的事实的任何反馈。由于用户将主要通过击键来触发单击，因此，我确实希望该单击反馈可见。我的代码破坏了Bootstrap动画，怎么了？是否有另一种方法可以让我像这里一样通过击键来触发按钮单击，但又不会破坏单击反馈动画？CODEPEN：https : //codepen.io/anon/pen/byebxg 在Codepen演示中，您可以尝试将鼠标悬停在该按钮上，然后单击该按钮，然后观看Bootstrap动画的小片段（演示中没有任何作用）。由于JavaScript代码段的原因，您还可以通过按“ j”来“单击”它（我添加了警报以表明按键监听正在工作）。但是，以这种方式“单击”按钮时，不会显示按钮动画。即使单击是由JS脚本触发的，也可以使它播放吗？

Answer 1

这是用于显示处理的Loader用途-

   <button  class="btn btn-success btn-lg" type="submit"  id="load" data-loading-text=" 

   <i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Button</button>

JavaScript代码是-

  <script>

      $('.btn').on('click', function() {

         var $this = $(this);

           $this.button('loading');

              setTimeout(function() {

                     $this.button('reset');

                         }, 8000);

               });

   </script>