jQuery UI Dialogue 防止默认，在按钮单击时恢复默认

Question

我正在使用 jQuery UI 显示一个对话框，询问“你真的要执行这个操作吗？”当用户点击超链接或表单按钮时。

如果用户点击“确认”，那么我想执行原来的默认操作。

这是我的代码：

[html]

<a href="page.htm">Click me</a>

[jquery]

// Global variable keeps track of whether the user has clicked confirm

var confirmed = false;

$("a").on("click", function(e) {

    var self = $(this);

    var options = {
        autoOpen: true,
        modal: true,
        title: "Confirmation Required",
        buttons : {
            "Confirm" : function() {
                // The user has confirmed, so set global variable to true
                confirmed = true;

                // Re-trigger the click
                self.trigger("click");
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        }
    };

    // If the user hasn't yet confirmed, display the dialogue box
    if (confirmed == false) {
        $("<div />").text("Are you sure you want to do this?").dialog(options);

        // Prevent the default action
        e.preventDefault();
    } 
    // Otherwise the user has confirmed, so don't preventDefault and return true
    else {
        confirmed = false;

        // Alert here to check we reached this point
        alert("Returning true");
        return true;
    }
});

第一次点击链接时，会阻止默认操作并打开对话框。

单击对话框中的“确认”时，再次触发单击事件，并触发警报框，提示“返回真”。到目前为止一切都很好，但是页面没有加载。因此，由于某种原因，第二次默认事件仍然被阻止，我一生都无法弄清楚原因。

Answer 1

这很可能是由于对话框仍处于打开状态。但是即使你关闭它，你也无法像这样点击 a 元素。

trigger('click')只触发jQuery中与click事件绑定的函数，如果你使用$el.click()，我认为它只支持格式<a onclick="func()">Click here</a>

我是如何解决这个问题的；在对话框确认中，我使用基于 <a> 元素 href 的 jQuery 更新窗口位置。

请参阅下面的工作 sn-p；

<a href="page.htm">Click me</a>

<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>
<script type="text/javascript">

$(document).ready(function() {

  var confirmed = false;

  $("a").on("click", function(event) {

      var $self = $(this);

      if (!confirmed) {

        event.preventDefault();

        $("<div />").text("Are you sure you want to do this?").dialog({
          autoOpen: true,
          modal: true,
          title: "Confirmation Required",
          buttons : {
              "Confirm" : function() {
                  window.location.href = $self.attr('href');
              },
              "Cancel" : function() {
                  $(this).dialog("close");
              }
          }
        });

      }

  });

});


</script>