我有按钮的jQuery对话框。当用户点击按钮时,需要一些时间来进行ajax调用并做一些事情。在此期间,用户可以反复点击。我想避免这种行为。
我知道,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>
&#13;