0

por que esto no funciona?

tengo una variable con una estructura html que al hacer click en un boton la imprimo en una etiqueta p para luego al boton que se encuentra en esa variable agregarle una funcion click pero al hacer esto no me funciona.

lo mismo pasa cuango lo hago con ajax que por ejemplo si hago lo mismo con ajax tengo que agregar denuevo el script en el ajax para que pueda funcionar la funtion, a que se debe esto?

NOTA: los estilos css si los toma la variable con el contenido html pero no el script

aqui les dejo un ejemplo de lo que trato de hacer

$(document).ready(function(){
    var contenido=`
     <div>
       <button id="pinchar2"> pinchar</button>
     </div>
    `;

    $('#pinchar').click(function() {
        alert("pinchado")
        $('p').html(contenido);
    });

    //luego al tratar de agregar la misma funcion a la variable me falla
    $("#pinchar2").click(function(){
        alert("pinchado")
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
    <button id="pinchar">check</button>
</div>
   
<p></p>

1
  • Deberías leer eventos delegados para entender, bastaría con asignar los eventos a un elemento existente, puede ser document para este caso, es decir $(document).on("click","#pinchar2",function(){ ....});
    – Dev. Joel
    Commented el 30 sept. 2018 a las 5:26

1 respuesta 1

2

Lo que pasa es que cuando buscas el botón #pinchar2 para asignarle el evento click, aún no ha sido añadido al dom, ya que es añadido hasta que das click en el botón #pinchar.

Lo que tienes que hacer es asignar el evento click hasta después de haberlo insertado en el dom:

$(document).ready(function(){
    var contenido=`
     <div>
       <button id="pinchar2"> pinchar</button>
     </div>
    `;

    $('#pinchar').click(function() {
        alert("pinchado")
        var p = $('p');
        p.html(contenido);

        p.find("#pinchar2").click(function(){
            alert("pinchado")
        });

    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
    <button id="pinchar">check</button>
</div>
   
<p></p>

Tu código lo que hace es ejecutarse al momento de cargar la página (evento ready).

Lo primero que hace es buscar el elemento #pinchar y le asigna una función a ejecutarse cuando se le dé click.

Luego, busca el elemento #pinchar2 para asignarle una función a ejecutarse cuando se le dé click, pero no lo encuentra porque aún no existe ese botón, ya que es creado hasta que das click en el botón #pinchar. Al no encontrar el botón #pinchar2, no le puede asignar el evento click.

5
  • no me quedo claro. como que aun no se ha agregado al dom? osea cuando haces lo siguente $('#pinchar').click(function() { alert("pinchado") var p = $('p'); p.html(contenido); esto se imprime inmediatamente en el dom podrias aclararme eso
    – andy gibbs
    Commented el 30 sept. 2018 a las 2:00
  • aun que tu codigo si funciona quiero tener algunos conceptos claros
    – andy gibbs
    Commented el 30 sept. 2018 a las 2:02
  • Actualicé mi respuesta tratando de ser lo más claro posible.
    – RockoDev
    Commented el 30 sept. 2018 a las 2:15
  • gracias por tu ayuda ya entendi ,ahora bien por que si lo encuentra cuando agregas find si todavia no esta en el dom? osea por que que tiene de especial find?
    – andy gibbs
    Commented el 30 sept. 2018 a las 2:20
  • El método find es solo para restringir la búsqueda del elemento #pinchar2 dentro del elemento p. Pero puedes usar $("#pinchar2").
    – RockoDev
    Commented el 30 sept. 2018 a las 2:28

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.