JQueryUI 模式对话框覆盖另一个模式对话框

Question

我有以下情况:

按钮打开一个包含复选框的模式对话框。当我单击此复选框时，我希望显示另一个模式对话框(警告)，但我也想保留新的复选框状态(选中或未选中)。例如，如果复选框未选中并被单击，我希望显示警告并且复选框被选中。

第一部分(在现有模式对话框上打开模式对话框)工作正常，但第二部分则不然(复选框永远不会被选中)。老实说，在调试时我注意到该复选框实际上在事件处理期间确实被选中，但由于某种我无法确定的原因，它又恢复到了原始状态。

我还注意到，如果我有选择字段或单选按钮而不是复选框，则不会发生恢复问题，如果任一对话框不是模态的，也不会发生恢复问题。

这是我的代码(演示:http://jsbin.com/amiyu4/2):

$(document).ready(function() {
  $('#myButton').button();

  $('#myButton').click(function() {
    var $dialog = $('<div><input type="checkbox" id="myCheckbox"/> <label for="myCheckbox">Show warning</label></div>');
    $dialog.dialog({
      modal: true,
      title: 'Modal dialog',
      buttons: {
        'Ok': function() {
          $(this).dialog('close');
        }
      },
      width: 600
    });

    $dialog.find('#myCheckbox').change(function() {
      var $alert = $('<div>Warning!</div>');
      $alert.dialog({
        autoOpen: true,
        modal: true,
        title: 'Warning',
        buttons: {
          'Ok': function() {
            $(this).dialog('close');
          }
        }
      });
    });

    $dialog.dialog('open');
  });
});

我的实际问题是:

1)为什么复选框从未被选中？

2)我该怎么做才能使其既被选中又显示警告？

编辑:我忘了提及:这是在 Chrome 中测试的。在 Firefox 中，上面的代码可以工作。在 Internet Explorer 中失败。

Answer 1

我来回答你的问题:

1) Why doesn't the checkbox ever become checked?

有一个与此相关的 jquery-ui 错误，该错误仅发生在 IE 中，与执行顺序相关。如果您在其他浏览器中运行代码，效果会很好。

2) What can I do to make it both become checked and display the warning?

单击该复选框时应该添加一点延迟。所以你将拥有:

$dialog.find('#myCheckbox').change(function() {
      setTimeout(function(){  //This does the trick!!
        var $alert = $('<div>Now it works!!</div>');
          $alert.dialog({
            autoOpen: true,
            modal: true,
            title: 'Warning',
            buttons: {
              'Ok': function() {
                $(this).dialog('close');
              }
            }
        });
      }, 10);
    });

我测试了它，它按预期工作。希望这有帮助。
干杯