「禁用」引導程序下拉菜單中的li，同時執行AJAX調用

Question

我有以下JSFiddle，它顯示引導程序.dropdown-menu。在下拉菜單的click事件中調用.stopPropagation()，以便它保持打開狀態。每個li包含a對應於一些AJAX功能（我使用setTimeout()在這個例子中模擬。

我想爲li到AJAX調用期間是「無法點擊」，使得UI不允許用戶用不必要的請求給端點發送垃圾郵件，爲此，當AJAX調用正在進行時，我會在當前的li中添加一個.submitting類，該類會在調用完成後立即刪除，將其用作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>

我的Ajax通話過程中使用css財產pointer-events:none;。 一旦Ajax呼叫完成，pointer-events將重新設置爲auto。

希望這會幫助你。以下方法

Answer 2

使用停止執行click事件

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; 
      } 
     }); 
    } 
});