使用.on（）時，幾次單擊后，jQuery（2.2.0）Click偵聽器停止工作，但.click（）可以正常工作

Question

我正在將Bootstrap 3.3.6與Jquery 2.2.0一起使用，並且嘗試使用.on()設置我的bootstrap下拉菜單項的單擊偵聽器。 鏈接點擊會記錄幾次點擊（通常為2-3次），但隨后它們將停止工作。 如果我使用.click() ，則單擊將繼續工作而不會出現問題。

采取的確切步驟：

1. 使用“我的項目1”菜單中的“向下移動”； 這會將其移動到“我的項目2”下方
2. 使用“我的項目2”菜單“向下移動”； 這會將其移動到“我的項目1”下方
3. 使用“我的項目1”菜單中的“向下移動”； 這不能動

JS Fiddle在這里演示問題： https ： //jsfiddle.net/e8qgqv9r/3/

<script>
$('#my-items').on('click', '.my-item-menu li a', function() {  // FAILS
//$(document).on('click', '.my-item-menu li a', function() {  // FAILS
//$('.my-item-menu li a').click(function() {  // WORKS
  var link = $(this);
  var item = link.parent().parent().parent().parent().parent().parent();

  if(link.hasClass('move_up')) {
    if(item.index() > 0) {
      item.parent().children().eq(item.index() - 1).insertAfter(item);
    }
  }
  else if(link.hasClass('move_down')) {
    if(item.index() < item.parent().children().length - 1) {
      item.parent().children().eq(item.index() + 1).insertBefore(item);
    }
  }
  else if(link.hasClass('tlog_remove')) {
    item.remove();
  }
  link.closest('.my-item-menu').dropdown('toggle');
  return false;
});
</script>
<div id="my-items">
  <div class="well well-sm">
    <div class="row">
      <div class="col-md-8 col-sm-8 col-xs-8">
        <h4>My item 1</h4>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="dropdown pull-right">
          <button id="menu-opt-btn-1" type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            options
            <span class="caret"></span>
          </button>
          <ul class="my-item-menu dropdown-menu" aria-labelledby="menu-opt-btn-1">
            <li><a href="" class="move_up">Move up</a></li>
            <li><a href="" class="move_down">Move down</a></li>
            <li><a href="" class="remove_item">Remove item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="well well-sm">
    <div class="row">
      <div class="col-md-8 col-sm-8 col-xs-8">
        <h4>My item 2</h4>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="dropdown pull-right">
          <button id="menu-opt-btn-2" type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            options
            <span class="caret"></span>
          </button>
          <ul class="my-item-menu dropdown-menu" aria-labelledby="menu-opt-btn-2">
            <li><a href="" class="move_up">Move up</a></li>
            <li><a href="" class="move_down">Move down</a></li>
            <li><a href="" class="remove_item">Remove item</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

我.on()錯誤地使用了.on() ，或者這是jquery / bootstrap的潛在錯誤？ （或我的瀏覽器-當前在OS X上運行Chrome 48.0.2564.103（64位）嗎？）

Answer 1

不知道為什么，可能必須與bootstraps dropdown插件的工作方式有關，但是您似乎在錯誤的元素上調用dropdown('toggle') 。 因此，可能是在未設置下拉菜單的元素上進行toggle （例如，不是data-toggle元素）最終導致事件冒泡被取消，從而使其永遠無法到達您的#my-items或document元素。 但這只是猜測，您必須深入研究他們的代碼才能確定。

開關

link.closest('.my-item-menu').dropdown('toggle');

像

link.closest('.dropdown').find("button").dropdown('toggle');

現在可以正常使用了

演示

 $('#my-items').on('click', '.my-item-menu li a', function() { //$(document).on('click', '.my-item-menu li a', function() { //$('.my-item-menu li a').click(function() { var link = $(this); var item = link.parent().parent().parent().parent().parent().parent(); if(link.hasClass('move_up')) { if(item.index() > 0) { item.parent().children().eq(item.index() - 1).insertAfter(item); } } else if(link.hasClass('move_down')) { if(item.index() < item.parent().children().length - 1) { item.parent().children().eq(item.index() + 1).insertBefore(item); } } else if(link.hasClass('tlog_remove')) { item.remove(); } link.closest('.dropdown').find("button").dropdown('toggle'); return false; }); 

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div id="my-items"> <div class="well well-sm"> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> <h4>My item 1</h4> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <div class="dropdown pull-right"> <button id="menu-opt-btn-1" type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> options <span class="caret"></span> </button> <ul class="my-item-menu dropdown-menu" aria-labelledby="menu-opt-btn-1"> <li><a href="" class="move_up">Move up</a></li> <li><a href="" class="move_down">Move down</a></li> <li><a href="" class="remove_item">Remove item</a></li> </ul> </div> </div> </div> </div> <div class="well well-sm"> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-8"> <h4>My item 2</h4> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <div class="dropdown pull-right"> <button id="menu-opt-btn-2" type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> options <span class="caret"></span> </button> <ul class="my-item-menu dropdown-menu" aria-labelledby="menu-opt-btn-2"> <li><a href="" class="move_up">Move up</a></li> <li><a href="" class="move_down">Move down</a></li> <li><a href="" class="remove_item">Remove item</a></li> </ul> </div> </div> </div> </div> </div>