querySelectorAll функции поживет альтернативу

Question

this tutorial на основе (и здесь живет demo)

Попытки iachieve этой функциональности в моем проекте. Как вы видите,

<button class="md-trigger" data-modal="modal-16">Blur</button> 

триггеры модальные. Проблема в том, что в моем проекте эта кнопка является результатом ajax и не вызывает модальность.

Поэтому необходимо внести некоторые изменения на modalEffects.js (размещен код ниже).

Но не может понять, что нужно изменить?

var ModalEffects = (function() { 

    function init() { 

     var overlay = document.querySelector('.md-overlay'); 

     [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function (el, i) { 

      var modal = document.querySelector('#' + el.getAttribute('data-modal')), 
       close = modal.querySelector('.md-close'); 

      function removeModal(hasPerspective) { 
       classie.remove(modal, 'md-show'); 

       if (hasPerspective) { 
        classie.remove(document.documentElement, 'md-perspective'); 
       } 
      } 

      function removeModalHandler() { 
       removeModal(classie.has(el, 'md-setperspective')); 
      } 

      el.addEventListener('click', function (ev) { 
       classie.add(modal, 'md-show'); 
       overlay.removeEventListener('click', removeModalHandler); 
       overlay.addEventListener('click', removeModalHandler); 

       if (classie.has(el, 'md-setperspective')) { 
        setTimeout(function() { 
         classie.add(document.documentElement, 'md-perspective'); 
        }, 25); 
       } 
      }); 

      close.addEventListener('click', function (ev) { 
       ev.stopPropagation(); 
       removeModalHandler(); 
      }); 

     }); 

    } 

    init(); 

})(); 

Answer 1

Просто позвольте задержать этап инициализации.

Изменить init(); для return init;

Тогда, когда DOM готов и содержание было загружено, вызовите ModalEffects();

Однако лучшим способом было бы использовать делегирование событий вместо этого, который в основном реагирует на события на контейнере (например, document.body) вместо каждый отдельный элемент. Это не только уменьшает количество обработчиков событий, но также автоматически учитывает изменения DOM.