2016-11-17 87 views
0

我有一個按鈕jQuery的對話框。當用戶點擊按鈕,它需要一定的時間,使AJAX調用,並做一些東西。在此期間,用戶可以一次又一次地點擊。我想避免這種行爲。jQuery UI的對話框按鈕點擊一次

我知道,jQuery有方法One()。哪一個會正好做我想要的。但是如何在對話框按鈕上實現這一點?

我當前的代碼是:

$d.dialog({ 
    buttons: [ 
     { 
      text: "Potrdi", 
      click: function() { 
       // do some stuff 
      } 
     } 
    ] 
}); 
+0

禁用上點擊按鈕,就不能再次點擊 –

回答

1

爲使用jQuery UI的按鈕的禁用選項禁用您可以設置按鈕:

button("option", "disabled", true); 

下面是如何正確地將其放在一個例子點擊該按鈕(該按鈕會再次後2個secons啓用):

$(function() { 
 
    $("#dialog-confirm").dialog({ 
 
    resizable: false, 
 
    height: "auto", 
 
    width: 400, 
 
    modal: true, 
 
    buttons: { 
 
     "Delete all items": function(e) { 
 
     btn = $(e.toElement).button("option", "disabled", true); 
 
     setTimeout(function() { 
 
      btn.button("option", "disabled", false); 
 
     }, 2000); 
 
     }, 
 
     Cancel: function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="dialog-confirm" title="Empty the recycle bin?"> 
 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
 
</div> 
 

 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>