Question

我正在使用带有Jquery 2.2.0的bootstrap 3.3.6，我正在尝试使用.on()为我的bootstrap下拉菜单项设置一个点击监听器。链接点击注册几次（通常2-3次），但随后它们停止工作。如果我使用.click()，则点击继续无问题。

采取了确切的步骤：

使用“我的项目1”菜单“向下移动”;这将它移到“我的项目2”
使用“我的项目2”菜单“向下移动”;这将它移到“我的项目1”
使用“我的项目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()，或者这是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');

现在按预期工作

<强>演示

＆＃13;

$('#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;
});

＆＃13;

<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>

＆＃13;

使用.on（）时，Jquery（2.2.0）点击监听器在几次点击后停止工作，但.click（）工作正常

1 个答案: