2016-11-17 88 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>