0

estoy intentando llamar un segundo archivo, desde otro archivo cargado con ajax + Jquery

El archivo principal, contiene un boton, que esta a la escucha de un evento, que cargara el contenedor de una archivo HTML. EL codigo del archivo principal es el siguiente:

<div class="container">
    <button class="waves-effect waves-light btn" id="boton1">Llamar archivo</button>
</div>

<div id="cargar_contenido">


</div>
<div id="cargar_contenido2">

</div>

Y el codigo javaScript el siguiente:

$(document).ready( function(){

    $("#boton1").click( function(){

        $("#cargar_contenido").load("match.html #container");
        console.log("El evento se ha desencadenado");    
    });


    $("#boton2").click( function(){

       $("#cargar").load("archivo.html #contenedor");
        console.log("EL segundo eveno se ha ejecutado");
    });


});

Cuando se cargue el primer contenedor del primer archivo llamado, solo se obtendra un botón cuyo ID="boton2" el problema viene cuando tengo que poner ese boton("boton2") a la escucha de un evento, se supone que al hacer click en ese segundo botón deba cargar un 3er archivo html, pero no se ejecuta el evento, y el 3er archivo no se carga.

Alguien tiene alguna idea de porque no se carga el archivo?

1 respuesta 1

1

Te recomiendo cambiar tus 2 listeners de eventos click.

Lo que habías hecho no estaba mal solo que solo funcionan si el elemento que estas buscando en este caso #boton2 esta ya creado en la pagina cuando se carga el JavaScript.

Antes

$(document).ready( function(){

    $("#boton1").click( function(){

        $("#cargar_contenido").load("match.html #container");
        console.log("El evento se ha desencadenado");    
    });


    $("#boton2").click( function(){

       $("#cargar").load("archivo.html #contenedor");
        console.log("EL segundo eveno se ha ejecutado");
    });


});

Despues

$(document).ready( function(){

    $(document).on("click", "#boton1", function(){

        $("#cargar_contenido").load("match.html #container");
        console.log("El evento se ha desencadenado");    
    });


    $(document).on("click", "#boton2", function(){

       $("#cargar").load("archivo.html #contenedor");
        console.log("EL segundo eveno se ha ejecutado");
    });


});

Este código te permitirá escuchar el click incluso cuando el elemento se haya creado después en el DOM.

Saludos!!

Tu Respuesta

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

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