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

trigger AJAX action when click on button inside dropdown without closing it

本文关键字：触发 操作 AJAX 下拉列表 按钮      更新时间：2023-09-26


正如你可能知道的，twitter引导程序中的任何操作都会导致下拉列表关闭，除非使用：

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

不幸的是，event.stopPropagation()也停止了ajax查询
我想要实现的是，当你在FB上收到一个朋友请求，并且在下拉列表中接受/拒绝而不关闭时
你能帮我吗？

只需将ajax调用放在event.stopPropagation调用之后。

在这种情况下，单击应该在$('.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>

相关文章：