通過另一個模式對話框的JQueryUI模式對話框

一個按鈕打開一個模式對話框，其中包含一個複選框。當我點擊這個複選框時，我想要顯示另一個模式對話框（警告），但我也想保持新的複選框狀態（選中或不選中）。例如，如果複選框未被選中並被點擊，我希望顯示警告，並選中複選框。

第一部分（開口在現有的模態對話框模態對話框）工作正常，但第二部分不（複選框從不變爲選中）。說實話，在調試的時候，我注意到這個複選框實際上在事件處理過程中會被檢查，但由於某些我無法確定的原因，它會恢復到原來的狀態。

我也注意到，如果我有一個選擇字段或單選按鈕而不是複選框該還原問題不會發生，也無論是否對話框不是模式不會發生。

這裏是我的代碼（演示：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中失敗。

來源

2011-05-07 rbarni

我會回答你的問題：

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

我測試了它，它按預期工作。希望這有助於。
乾杯

來源

2011-05-07 18:36:08

它確實有效。感謝您的回答！正如一個側面說明，這個問題也發生在Chrome中。我的糟糕之處，我忘了說我正在使用哪個瀏覽器，也忘了在其他瀏覽器中測試它。 – rbarni 2011-05-07 18:50:52

通過另一個模式對話框的JQueryUI模式對話框

回答

相關問題