Question

我有以下情况：

按钮打开一个包含复选框的模式对话框。当我单击此复选框时，我想要显示另一个模式对话框（警告），但我还想保留新的复选框状态（选中或取消选中）。例如，如果取消选中该复选框并单击该复选框，我希望显示警告并选中复选框。

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

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

$(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）为什么没有复选框被检查？

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

2）我能做些什么才能做到这两点检查并显示警告？

单击复选框时，您应该添加一个小延迟。所以你会：

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

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

另一个模态对话框上的JQueryUI模式对话框

1 个答案: