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

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

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

我是如何解决这个问题的;在对话框确认中，我使用基于<a>元素href。

的jQuery更新窗口位置

请参阅下面的工作代码段;

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

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

1 个答案: