Материализация мод CSS не работает через вставку JS innerHTML - PullRequest
Новая
       6

Материализация мод CSS не работает через вставку JS innerHTML

0 голосов
/ 22 февраля 2019

Я пытаюсь вставить модальный CSS Materialise с функцией JS innerHTML, но модал больше не работает, не знаю почему.Хотя это нормально работает в документе. 

  $(document).ready(function(){
    $('.modal-trigger').leanModal();
    insertModal();
  });

function insertModal(){
  var html = '';
  html += '<div class="col"><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> </div>';
  //Modal Structure
  html += '<div id="modal1" class="modal">';
  html += '<div class="modal-content"><h4>Modal Header</h4><p>A bunch of text</p></div>';
  html += '</div>';
  document.getElementById('modal-test').innerHTML = html;
}

Вот демонстрация, с которой я столкнулся, с которой сталкиваюсь https://codepen.io/RelativeBinary/pen/YBbmrg?editors=1010

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

Любые предложениябудет признателен.

PS: Демо-версия исправлена, все еще представляет проблему, но отражает реальную причину, по которой она не работает лучше.

1 Ответ

0 голосов
/ 22 февраля 2019

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

https://codepen.io/bilal-ahmad/pen/vbqWrd?editors=1010

<div id="modal-test" class="row section">
</div>

  $(document).ready(function(){
    insertModal();
  });

function insertModal(){
    var html = '';
    html += '<div class="col"><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> </div>';
   //Modal Structure
   html += '<div id="modal1" class="modal">';
   html += '<div class="modal-content"><h4>Modal Header</h4><p>A bunch of text</p></div>';
   html += '</div>';
   document.getElementById('modal-test').innerHTML = html;
   $('.modal').modal();
}

Как вы упоминаете, вы загружаете модалы в цикле так,Я предлагаю инициализировать модал в конце цикла, в который вы загружаете все ваши модалы, а затем инициализировать модал.

Примечание: Пожалуйста, обновите также ссылку на файл css js для материаловедения, которая выглядит устаревшей.

...