Question

我有按钮的jQuery对话框。当用户点击按钮时，需要一些时间来进行ajax调用并做一些事情。在此期间，用户可以反复点击。我想避免这种行为。

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

我目前的代码是：

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

Answer 1

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

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

以下是如何在点击按钮上正确设置的示例（该按钮将在2个secons后再次启用）：

＆＃13;

$( 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" );
      }
    }
  });
} );

＆＃13;

<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;

jQuery UI对话框按钮单击一次

1 个答案: