jQuery UI 对话框按钮单击一次

Question

我有 jQuery 带按钮的对话框。当用户单击按钮时，需要一些时间才能进行 ajax 调用并执行一些操作。在此期间，用户可以一次又一次地点击。我想避免这种行为。

我知道 jQuery 有方法 One()。这将完全符合我的要求。但是如何在对话框按钮上实现这一点？

我当前的代码是：

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

Answer 1

您可以使用 jquery-ui 按钮的禁用选项将按钮设置为禁用：

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

这里举例说明如何在点击的按钮上正确设置（按钮将在 2 秒后再次启用）：

$( 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>

jQuery UI 对话框按钮单击一次

jQuery UI dialog buttons click once

jquery

jquery-ui

jquery-ui-dialog