Блог

У меня следующий сценарий:

Кнопка открывает модальный диалог, который содержит флажок. Когда я нажимаю на этот флажок, я хочу, чтобы отображался другой модальный диалог (предупреждение), но я также хочу сохранить новое состояние флажка (либо установленный, либо снятый). Например, если флажок снят и на него нажимают, я ожидаю, что будет отображено предупреждение и флажок станет установленным.

Первая часть (открытие модального диалога поверх существующего модального диалога) работает правильно, но вторая часть — нет (флажок никогда не устанавливается). Честно говоря, во время отладки я заметил, что флажок действительно устанавливается во время обработки события, но по какой-то причине, которую я не смог определить, он возвращается в исходное состояние.

Я также заметил, что проблема возврата не возникает, если у меня есть поле выбора или переключатель вместо флажка, и этого также не происходит, если любой диалог не является модальным.

Вот мой код (демо: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 происходит сбой.

Я отвечу на ваши вопросы:

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

Я протестировал его, и он работает так, как ожидалось.
Надеюсь, это поможет.
Приветствия