0

se me presentó un problema al crear una página web, no sé por que razón ocurre espero que me puedan guiar para resolver este problema

sucede que la página cuenta con una función de carga asincrona usando jquery sobre un div al obtener el html y cargarlo en el div usano .load, todo bien hasta ahi

el problema es que en el contenido del div recien cargado no funciona ninguna de las funciones de jquery que ya estan cargadas en la pagina

este es mi código

<script>
$( function() {
    $("#riesgo").click(function(event) {
        $( "#grilla" ).load( "prueba.php");
    }); 

    $( "#opener" ).on( "click", function() {
        alert ('hola');
    });

  });
</script>
<body>
    <button id="riesgo">cargar</button>
    <div id="grilla" align="center"></div>
</body>

el html que cargo en el div grilla es:

<div>
  <p>prueba</p>
</div>

<button id="opener">probar jquery</button>

una vez cargado el html el boton opener no funciona

pueden ayudarme a solucionar este problema, que puede hacer para que el boton que se carga en el div funcione correctamente

gracias

1 respuesta 1

0

Esto sucede porque ténicamente el elemento con id opener no existe cuando se cargó la página por primera vez, por lo que para corregir tu problema tendrías que usar delegated events, es decir que debes cambiar tu código a este:

$(document).on("click", "#opener", function() {
  alert('hola');
});

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.