jQuery - модальная диалоговая форма загружается с помощью .load () несколько раз и выбирает разрывы списка - PullRequest
Новая
       9

jQuery - модальная диалоговая форма загружается с помощью .load () несколько раз и выбирает разрывы списка

1 голос
/ 29 июля 2010

Я загружаю контент с помощью jquery.load () (1.4.2), который включает форму, которую я превращаю в диалоговое окно модели.Когда я открываю диалоговое окно, я динамически заполняю список выбора формы.

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

Я загружаю содержимое как: 

<script>
...
 $("#content").load("test.html")
..
</.script>
...
<div id="content"></div>

Ифайл test.html: 

<script type="text/javascript">
jQuery(document).ready(function(){
  $("#testForm").dialog({
    autoOpen: false,
    height: 400,
    width: 700,
    modal: true,
    buttons: {
      'Alert': function() {
        alert($("#testSelectList").val());
      },
      'Close': function() {
        $(this).dialog('close');
      }
    },
    close: function() {
    },
    open: function() {
      alert("Open");
      $("#testSelectList").html("<option value=\"one\">one</option><br/>"+
         "<option value=\"two\">two</option><br/>"+
         "<option value=\"three\">three</option><br/>"+
         "<option value=\"four\">four</option><br/>");
    }
    });
  $("#testButton").button().live('click', function() {$("#testForm").dialog('open');});
});
</script>

<div id="testForm" title="Test">
  <form>
  <fieldset>
    <label for="testSelectList">Select List</label><br/>
    <select id="testSelectList" class="ui-state-default ui-corner-all">
    <option value="">-none-</option></select><br/>
  </fieldset>
  </form>
</div>

<div id="test">
  <h1>Form Select List Test</h1>
  <button id="testButton">Open Test Form</button>
</div>

В этом примере на втором .load (), если я нажму кнопку оповещения, он не вернет выбранный элемент списка - он вернет только первыйitem.

Я пытался поместить .live () вокруг нажатия кнопки, открывающего диалоговое окно ... но это ничего не меняет.

Ответы [ 2 ]

3 голосов
/ 29 июля 2010

Когда вы создаете диалог, он перемещает его в конец <body> (более важно, вне #content, поэтому он избегает смерти, когда #content перезагружается).Так что получается, что ваш .load() получает этот контент, но диалоговое окно остается, и вы извлекаете контент с дублирующимися идентификаторами после первой загрузки.

Убедитесь, что сначала уничтожили это диалоговое / исходное содержимое, чтобы избежать проблемы с дублированием, например: 

$("#testForm, #test").remove();
$("#content").load("test.html");

Обратите внимание, что .remove() очищает обработчики событий, которые в противном случае остались быи вокруг него.

При этом нет необходимости в обработчике .live(), так как теперь у вас теперь правильно будет по одной кнопке и по одному диалогу за раз, вместо многократного обменаодинаковые идентификаторы.

0 голосов
/ 29 июля 2010

Я бы добавил обратный вызов в вашу функцию загрузки и запустил там ваш javascript 

$("#content").load("test.html", function(){
//Javascript code
});
...