Question

我有以下JSFiddle，其中显示了引导程序.dropdown-menu。在下拉菜单的.stopPropagation()事件中调用click，以使其保持打开状态。每个li都包含一个a，它对应于某些AJAX函数（我在此示例中使用setTimeout()进行了模拟。

我希望在AJAX调用期间li“无法点击”，以便UI不允许用户使用不必要的请求向端点发送垃圾邮件。为此，当进行AJAX调用时，我向当前.submitting添加一个li类，一旦调用完成就将其删除，以将其用作AJAX调用的标识符正在li发生。但是我不知道如何在AJAX提交期间实际“禁用”li。据我所知，在进行通话时没有内置的方法来“禁用”li。

$('ul.dropdown-menu.custom-list li.list-item.submitting').click(function(e) {
    return false; // doesn't work
});

如何在AJAX调用期间使li无法点击，然后在AJAX调用完成后返回可点击状态？

编辑：非常清楚，我只希望当前li 无法点击，而不是全部。因此，如果我单击索引为0的li，则在发生AJAX调用时，索引为0的li将变为无法点击。 AJAX调用完成后，索引为0的li将再次单击。

Answer 1

您可以使用解决方案https://jsfiddle.net/ypj3ve6n/4/

/* Latest compiled and minified JavaScript included as External Resource */
$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});

$('ul.dropdown-menu.custom-list li.list-item').click(function(e) {
  console.log('item ' + $(this).text() + ' clicked');
  var listItem = $(this);
  listItem.addClass("submitting");
  $(this).css({
    'pointer-events': 'none'
  });
  var that = this;
  var millisecondsToWait = 4000;
  setTimeout(function() {
    console.log('complete');
    listItem.removeClass("submitting");
    $(that).css({
      'pointer-events': 'auto'
    });
  }, millisecondsToWait);
});

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Examples</li>
                        <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
                        <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
                        <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
                        <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
                        <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
                        <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
                        <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
                        <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
                        <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>                        
                        <li class="divider"></li>
                        <li class="dropdown-header">Compatibility</li>
                        <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
                    </ul>
                </li>
                <li><a href="http://getbootstrap.com/css">CSS</a></li>
                <li><a href="http://getbootstrap.com/components">Components</a></li>
                <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>
   
    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.3.7</h1>
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
          </button>
      <ul class="dropdown-menu custom-list" aria-labelledby="dropdownMenu1">
        <li class="list-item"><a href="javascript:void(0)">Action</a></li>
        <li class="list-item"><a href="javascript:void(0)">Another action</a></li>
        <li class="list-item"><a href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="list-item"><a href="javascript:void(0)">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

我在css电话中使用了pointer-events:none;属性Ajax。完成Ajax来电后，pointer-events将重新设置为auto。

希望这会对你有所帮助。

Answer 2

使用以下方法停止执行点击事件的传播

var text=0;
$('ul.dropdown-menu.custom-list li.list-item.submitting').click(function(e) {
    if(text==1)
    {
        return false;
    }
    else
    {
        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            beforeSend: function() {
                text=1;
            },
            success: function(data) {
            text=0;
            }
        });
    }
});

执行AJAX调用时，“禁用”Bootstrap下拉菜单中的li

2 个答案: