Question

正如您可能知道的那样，Twitter的引导程序中的任何操作都会导致关闭下拉菜单，除非使用：

$('.dropdown-menu').click(function(event){
         event.stopPropagation();
      })

不幸的是，event.stopPropagation()也会停止ajax查询我想要实现的就是当你在FB上收到朋友请求并且你在接下来接受/拒绝而不关闭它时。
你能救我吗？

Answer 1

只需在event.stopPropagation来电之后拨打ajax电话。

在这种情况下，点击应该在$('.dropdown-menu > li > a')元素上。见下面的例子。

/**** Ignore this command - just used to mock up an ajax response **/
$.mockjax({
  url: '/likethis',
  responseTime: 1000,
  responseText: {
    status: 'success',
    fbStatus: 'liked'
  }
});

$('.dropdown-menu > li > a').click(function(event){
    event.stopPropagation();
  
    $.ajax({ url: '/likethis',
              success: function() {
                 $('#likelink').html('<span class="glyphicon glyphicon-ok"></span> Liked!');
              }
           });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Like This <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" id="likelink">Like</a></li>
  </ul>
</div>

单击下拉列表中的按钮而不关闭它时触发AJAX操作

1 个答案: