3

muy buenos dias a todos , tengo un elemento div en mi estructura HTML5 que es la siguiente

<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
        <aside class="app-sidebar">
            <div class="sidebar-img">
                <a class="navbar-brand" href="index-2.html"><img alt="..." class="navbar-brand-img main-logo" src="assets/img/brand/logo-dark.png"> <img alt="..." class="navbar-brand-img logo" src="assets/img/brand/logo.png"></a>
                <ul class="side-menu">
                    <li class="slide">
                        <a class="side-menu__item active" data-toggle="slide" href="#"><i class="side-menu__icon fe fe-home"></i><span class="side-menu__label">Dashboard</span><i class="angle fa fa-angle-right"></i></a>
                        <ul class="slide-menu">
                            <li>
                                <a class="slide-item" href="index-2.html">Retail Sales Dashboard</a>
                            </li>
                            <li>
                                <a class="slide-item" href="dashboard-social.html">Social Dashboard</a>
                            </li>
                            <li>
                                <a class="slide-item" href="dashboard-marketing.html">Marketing Dashboard</a>
                            </li>
                            <li>
                                <a class="slide-item" href="dashboard-it.html">IT Dashboard</a>
                            </li>
                            <li>
                                <a class="slide-item" href="dashboard-cryptocurrency.html">Cryptocurrency Dashboard</a>
                            </li>

                        </ul>
                    </li>
                    <div id="nav-menu">

                    </div>
                </ul>
            </div>
        </aside>
        <!-- Sidebar menu-->

en mi div con la referencia de id "nav-menu" lleno elementos que serian los menus y submenus pero estos elemntos vienen de mi base de datos, adjunto mi Javascript :

    let dashboard = {
    menu: [],
    submenu : []
};
let menu = '';
$(document).ready(function(){

    getDataMenu();
    setTimeout(function(){
        for(let i in dashboard.menu){

            menu += `
                <li class="">
                <a class="side-menu__item active" data-toggle="slide" href="#"><i class="side-menu__icon ${dashboard.menu[i]['icono']}"></i><span class="side-menu__label">${dashboard.menu[i]['nombre']}</span><i class="angle fa fa-angle-right"></i></a>
                <ul class="slide-menu">
                `

            menu += retornarLi(dashboard.menu[i]['idmodulo']); 

            menu +=`</ul></li>`


        }

        $("#nav-menu").append(menu)
        $("#nav-menu > li").addClass("slide");
        /*
        $("#nav-menu li").on("click", function(){

        })
        */


    },100)



})


function retornarLi(idmodulo){
    let li = ``;
    for(let e in dashboard.submenu){
        if(dashboard.submenu[e]['idmodulo'] == idmodulo){
            li += `

                    <li>
                        <a class="slide-item" href="${dashboard.submenu[e]['ruta']}">${dashboard.submenu[e]['nombre']}</a>
                    </li>

                    `
        }
    }
    return li;
}

function getDataMenu(){
    // =======================MENU=====================================
    fetch(`${window.ruta}/menus`,{
        method:"GET",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
    })
    .then(res=>res.json())
    .then( res => {
        let data = res.modulos;

        for(i in data){
            dashboard.menu.push({
                'idmodulo': data[i]['idmodulo'],
                'nombre': data[i]['nombre'],
                'icono' : data[i]['icono']
            })
        }

    }).catch(error => console.log(error))

    //================================SUB MENU==============================
    fetch(`${window.ruta}/submenu`,{
        method:"GET",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
    })
    .then(res => res.json())
    .then(res => {
        let datos = res.submodulos

        for(e in datos){
            dashboard.submenu.push({
                'idmodulo': datos[e]['idmodulo'],
                'nombre': datos[e]['nombre'],
                'ruta': datos[e]['ruta']
            })
        }

    })
    .catch(error => console.log(error))
}

en mi javascript hago la consulta a mi api donde me trae mis menu's y submenu's pero al darle .html lo agrega todo normal pero al darle un click no se desplazan adjunto una imagen con una prueba de la primer elemento que esta en html en duro tal y como deberia funcionar los demas al dar click (dashboard y usuarios no funcionan) el primer dashboard es codigo html que esta en el nav imagen dashboard

en que puedo estar fallando ? Muchas Gracias de Antemano

5
  • Lo que sucede es que para que los elementos del menú se muevan se les aplica alguna función de js. Los menús que estás agregando no se mueven porque la función js que los activa se ejecutó antes de que ellos estuvieran ahí. Para solucionarlo debes volver a ejecutar el código js que activa los menús.
    – Lobos
    Commented el 12 jul. 2019 a las 17:25
  • osea darles denuevo la ruta del script? <script src="path/to/here"></script>?? Commented el 12 jul. 2019 a las 17:28
  • No, en los js de la plantilla por lo general hay un custom.js que contiene el código que inicializa todos los componentes js, incluyendo los menús. Si encuentras ese archivo podrías envolver todo su contenido en una función, y cuando agregues los nuevos elementos del menú invocas esa función para que active todos los elementos nuevos. Son sugerencias que te hago en base a mi experiencia pero no puedo ser certero sin saber como está estructurada la plantilla. Puedes publicar la sección donde se cargan todos los archivos js.
    – Lobos
    Commented el 12 jul. 2019 a las 17:35
  • No veo en tu código cómo le quieres añadir el comportamiento que dices que falta, no hay ningún event listener para los clicks. Commented el 15 jul. 2019 a las 13:20
  • @PabloLozano por eso mismo los estoy creando con la misma clase. Commented el 15 jul. 2019 a las 13:55

1 respuesta 1

1

Yo utilizo $(document).on() para cuando quiero ejecutar código en elementos creados posteriormente a la creación del evento
Ejemplo:

$(document).on("click",".test_elem",function(){
   //Código aquí
});

Esto utiliza jquery para funcionar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.