通过另一个模式对话框的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）为什么不复选框曾经 成为检查？

有一个与此相关的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); 
    }); 

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