I am trying to make a Dynamic menu through a database, where I get id and make a query after that I pass it to a function where I generate the html, it generates me but it does not apply the events, what could it be?, My code is the following:
const mainnav_menu = document.getElementById('mainnav-menu')
const templateModulo = document.getElementById('template-modulo').content
const templateMenu = document.getElementById('template-menu').content
const fragmentModulo = document.createDocumentFragment()
const fragmentMenu = document.createDocumentFragment()
for (var mo = 0; mo < data.length; mo++) {
// Almaceno modulo en variable
var nextModulo = data[mo]["nombre_modulo"];
// Comparacion
if (modulo !== nextModulo) {
// Recorrer Menu
for (var me = 0; me < data.length; me++) {
// Almaceno menu en variable
nextMenu = data[me]["nombre_menu"];
// Comparacion
if (data[mo]["nombre_modulo"] == data[me]["nombre_modulo"]) {
// Comparacion
if (menu != nextMenu) {
if (data[me]["link_menu"] !== '/') {
} else {
templateModulo.querySelector('li ul li a').textContent = data[me]["nombre_submenu"];
}
}
}
}
templateModulo.querySelector('li a span').textContent = data[mo]["nombre_modulo"];
const cloneModulo = templateModulo.cloneNode(true);
fragmentModulo.appendChild(cloneModulo);
}
mainnav_menu.appendChild(fragmentModulo)
}
My template is the following:
<template id="template-modulo">
<li>
<a href="#">
<i class="demo-pli-tactic"></i>
<span class="menu-title">Modulo Level</span>
<i class="arrow"></i>
</a>
<!--Submenu-->
<ul class="collapse">
<li>
<a href="#"> Menu Item</a>
</li>
</ul>
</li>
</template>
And finally, if it generates the html and inserts it, but the event does not apply, why? I must use another way,
