Выпадающее меню материализации не работает после перезагрузки jquery

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

<script>
    $(document).ready(function(){
      $("#second-page").hide();
      $("#continue-button").click(function(){
        var $second_page_content=$("#second-page").html();
        $("#first-page").html($second_page_content);
        $("#second-page").trigger('contentChanged');
      });
     $("select").on('contentChanged', function(){
          $(this).material_select();
     });
  });
  </script>


<div class="row" id="first-page">
  <form>
  <div class = "row">
    <select id="animal">
      <option value = "bird">Bird</option>
      <option value = "cat">Cat</option>
      <option value = "Insect">Insect</option>
    </select>
    </div>
    <button class="btn waves-effect waves-light" id="continue-button">CONTINUE</button>
  </form>
</div>

<div class="row" id="second-page">
<form>
  <div class = "row">
    <select id="animal-type">
      <option value = "hen">Hen</option>
      <option value = "lion">Lion</option>
      <option value = "butterfly">Butterfly</option>
    </select>
  </div>
</form>
</div>

dropdown jquery select materialize
person user2970374    schedule 13.10.2017    source источник
comment
Вы, вероятно, должны делегировать событие select его родителю или даже самому документу.   -  person SubjectDelta    schedule 13.10.2017
comment
Эти два div из разных файлов? В противном случае, вместо того, чтобы перемещать html-контент, вы можете показывать/скрывать их, предотвращая отсоединение событий от их владельцев.   -  person SubjectDelta    schedule 13.10.2017
comment
@SubjectDelta, отображение/скрытие div не работает, потому что после загрузки содержимого восстанавливается предыдущий статус, то есть первая страница показана, вторая страница скрыта. Это должно быть что-то с методом .html(), который снова запускает document.ready, чтобы установить элементы в их исходное состояние, или что-то в этом роде.   -  person user2970374    schedule 14.10.2017
comment
Вы можете отправить скрытое поле, в котором будет указано, какую форму вы должны показать... Кстати, попробуйте эти советы в моем ответе.   -  person SubjectDelta    schedule 14.10.2017
comment
@SubjectDelta Кажется, на данный момент у меня есть работающее решение, которое использует отображение/скрытие (и предотвращает перезагрузку страницы с помощью event.preventDefault();). Это не самое оптимальное, но на данный момент это может подойти. Спасибо за указатели.   -  person user2970374    schedule 14.10.2017

Ответы (2)


arrow_upward
0
arrow_downward

Если вы замените вторую страницу, элемент select также будет заменен, поэтому обработчик кликов больше не вызывается. Либо вы повторно подключаете обработчик кликов после замены, либо используете параметр селектора в вызове on().

person ViRuSTriNiTy    schedule 13.10.2017

arrow_upward
0
arrow_downward

Давайте запишем то, что я предложил в комментариях... Это должно помочь:

$('#second-page').on('contentChanged', 'select', function() {
    $(this).material_select();
});

Но я предлагаю вам больше что-то вроде

$("#continue-button").click(function() {
    $("#first-page").hide();
    $("#second-page").show();
});

ОБНОВЛЕНИЕ

Я не прочитал это $("#second-page").trigger('contentChanged'); при первом чтении, вы на самом деле запускаете это событие для #second-page, а не для выбранных, так что...

$('#second-page').on('contentChanged', function() {
    $(this).find('select').material_select();
});

В противном случае, если вы хотите сохранить свою первую идею, вы должны инициировать это событие при выборе, как это

$("#second-page").find('select').trigger('contentChanged');

ФИНАЛЬНОЕ ОБНОВЛЕНИЕ

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

Я пытался переписать ваш материал, он работает так, как я вам посоветовал.

Удачи

$(document).ready(function(){
  $('#continue-button').click(function(){
    $('#first-page').hide();
    $('#second-page').show();
    $('#animal-type').material_select();
  });
});
#second-page { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" id="first-page">
  <div class = "row">
    <select id="animal">
      <option value = "bird">Bird</option>
      <option value = "cat">Cat</option>
      <option value = "Insect">Insect</option>
    </select>
  </div>
  <button class="btn waves-effect waves-light" id="continue-button">
    CONTINUE
  </button>
</div>

<div class="row" id="second-page">
  <div class = "row">
    <select id="animal-type">
      <option value = "hen">Hen</option>
      <option value = "lion">Lion</option>
      <option value = "butterfly">Butterfly</option>
    </select>
  </div>
</div>

person SubjectDelta    schedule 13.10.2017
comment
Спасибо за Ваш ответ. Суть вопроса была не в красивых формах, а в том, как заставить материализовать выборки работать с динамически загружаемым контентом. - person user2970374; 14.10.2017
comment
Ваше решение скрывает/показывает, повторный вызов material_select не требуется (при нажатии кнопки новый контент не загружается). event.preventDefault необходим для предотвращения перезагрузки/повторного отображения первой страницы страницы. рабочее решение выглядит так; $(document).ready(function(){ $('#second-page').hide(); $('#continue-button').click(function(){ event.preventDefault(); $('#first-page').hide(); $('#second-page').show(); }); }); - person user2970374; 14.10.2017