如何防止用戶雙擊按鈕打開兩個相同的Boostrap對話框？

Question

如果ajax需要一段時間來加載對話框並且用戶雙擊該按鈕，屏幕上將彈出兩個相同的對話框。我想阻止它發生。

$("#ShowUpCallTag").on('click', function (e) { 
     $.ajax({ 
      url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
      type: 'get', 
      datatype: 'json' 
     }).done(function (data) { 
      var dialog = main.ship.calltags.dialog.buildDialog(data); 
      dialog.open(); 
     }); 
    }); 

Answer 1

我認爲你的代碼中的問題是你不知道對話框是否打開。我會做什麼：

1. 創建一個在同一範圍比你的jQuery呼叫的變量，例如：var dialogOpened = false
2. 在你的點擊處理函數，做Ajax調用只有dialogOpened === false
3. 在你done(function (data) {})回調，將dialogOpened設置爲true，並監聽Bootstrap生成的事件以瞭解用戶何時關閉模式（請參閱Bootstrap Modal Events）
4. 當模式關閉時，請將dialogOpened設置爲false。
5. 我認爲這也是一個很好的做法：如果您綁定點擊的元素是一個按鈕，您可以在用戶點擊該按鈕後將其禁用。

Answer 2

  var isModelDialogOpen = false; 
      $("#ShowUpCallTag").on('click', function (e) { 
      if (isModelDialogOpen == false) { 
       isModelDialogOpen = true; 

       //Popup call tag dialog. 
       $.ajax({ 
        url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
        type: 'get', 
        datatype: 'json' 
        .done(function (data) { 
         var dialog = main.ship.calltags.dialog.buildDialog(data); 
         dialog.open(); 
        }) 
        .always(function (data) { 

         isModelDialogOpen = false; 
        }); 
      } 
     });