Question

单击按钮时，我使用jQuery UI dialog显示确认对话框。我想在点击“确定”时返回true，否则返回false。

在onClick（如给定here，$dialog.dialog('open');）事件中关联对话框公开通话不符合此目的。因此，作为一种解决方法，我采用了一种与此类似的方法：http://www.perfectline.co.uk/blog/unobtrusive-custom-confirmation-dialogs-with-jquery。这种方法与我的方法有两点不同：

该示例使用锚标记和
它不使用jQuery UI对话框。

我修改了示例链接中给出的代码，但它不起作用。我不知道我做错了什么。有没有更便宜的方法来做到这一点？

以下是代码，所有CSS / JS都引用了jQuery CDN，因此您应该能够复制代码以查看行为。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/blitzer/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Control Panel</title>
  </head>

  <body>
    <form action="http://google.com">
      <button class="es-button ui-state-default ui-corner-all" name="changeSem" id="id2">Start Thermonuclear War</span>
      </button>
    </form>
    <div title="Why so serious?" id="id3" style="display:none;">
      <p>You are about to start a war.
        <p>Click OK to confirm. Click Cancel to cancel this action.</p>
    </div>
  </body>
  <script type="text/javascript">
    $('#id2').click(function (event) {

      if ($(this).data('propagationStopped')) {
        //alert('true');
        $(this).data('propagationStopped', false);
        return true;
      } else {

        event.stopImmediatePropagation();

        $('#id3').dialog({
          //autoOpen: false,
          width: 600,
          buttons: {
            "Ok": function () {
              $(this).dialog("close");
              $('#id2').data('propagationStopped', true);
              $('#id2').triggerHandler(event);
            },
            "Cancel": function () {
              $(this).dialog("close");
              return false;
            }
          }
        });
        //alert('false');
        return false;
      }
    });
  </script>

</html>

澄清：请注意，提交表单非常简单（请参阅solution by bryan.taylor）。我想在这里做的是通过按钮点击来模拟提交。更像是JavaScript的confirm()方法。

Answer 1

JavaScript是异步的。致电

$myDialog.dialog('open');

不会阻止，而是会立即返回。

相反，必须使用您在buttons option of dialog中提供的事件回调。

这个近似重复提供了一个很好的例子：

jquery ui dialog box need to return value, when user presses button, but not working

Answer 2

您的代码有点费解，我认为有一种更简单的方法可以做到这一点。您应首先实例化对话框，然后在按钮的单击事件上打开它。代码看起来与此类似：

<script>
$(document).ready(function () {
  var $myDialog = $('<div></div>')
    .html('You are about to start a war.<br/>Click OK to confirm.  Click Cancel to stop this action.')
    .dialog({
    autoOpen: false,
    title: 'Why so serious?',
    buttons: {
      "OK": function () {
        $(this).dialog("close");
        window.open('http://google.com/');
        return true;
      },
      "Cancel": function () {
        $(this).dialog("close");
        return false;
      }
    }
  });

  $('#myOpener').click(function () {
    return $myDialog.dialog('open'); //replace the div id with the id of the button/form
  });
});
</script>

<div id="myOpener"></div>

这是jQuery UI Dialog API文档，因此您可以看到所有选项：

http://api.jqueryui.com/dialog/

使用JQuery UI对话框从确认对话框返回值

2 个答案: