I'm trying to insert a Materialize CSS modal with JS innerHTML function but the modal doesn't work anymore not sure why. It works when normally in the document though.
$(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;
}
Here is the demo I've of the issue im encountering https://codepen.io/RelativeBinary/pen/YBbmrg?editors=1010
I plan to have a loop which will insert a bunch of modals based on an array of objects, so each modal would contain different information, which is why im inserting from JS, so i don't have to manually type out each modal for each different object.
Any suggestions would be appreciated.
PS: Demo is fixed, still represents the issue but reflects the actual reason why it wasnt working better.