[SOLUCIONADO] botón dinámico y ni caso

[coloradocanyon]

Hola a todos, estoy haciendo pruebas con el jquery, he creado un formulario de forma dinámica, me muestra un campo para rellenar y un botón, el único problema es que jquery ni se entera que existe, ¿algún consejo?, ¿como se controla este botón?

un saludo y gracias....

[marlanga]

Si defines el evento click sobre elementos que no existen cuando cargas la página, nunca funcionará. Una de dos, o defines ese evento cuando ese elemento exista, o usas eventos delegados.

[coloradocanyon]

te agradezco mucho tu respuesta, no tenía ni idea, ¿puedes explicarlo con un ejemplo?.

un saludo y gracias....

[marlanga]

http://jsfiddle.net/5aVUE/1/

Código HTML:

<div id="directo">
    <h2>Eventos de botones que no existe</h2>
    <button class="add">Añadir boton</button>
</div>
<hr/>
<div id="delegado">
    <h2>Eventos de botones que no existe</h2>
    <button class="add">Añadir boton</button>
</div>
 

Código Javascript:

$(function(){
    
    $(".add").click(function(){ //Boton para añadir botones dinamicamente
        $(this).parent().append('<button class="dinamico">pulsame</button>');
    });
    
    $("#directo .dinamico").click(function(){ //Boton de evento directo.
        //Cuando carga la pagina no existe ningún boton con la clase dinamico en el div directo
        //Asi que no funcionará nunca.
        alert("jamás funcionará");
    });
    
    $("body").on("click","#delegado .dinamico",function(){
        //Cuando carga la página, pone por ejemplo al BODY, que sí existe, a escuchar eventos
        //del tipo CLICK. Cuando captura uno, comprueba si fue disparado por un boton con
        //la clase dinamico metido en el div delegado.
        alert("funciona");
    });
});
 

El evento delegado funciona porque los eventos javascript se transmiten de un elemento a su padre, y del padre al padre del padre, así hasta llegar al BODY.
Es decir, si haces click en un boton metido en un div A, y el div A está metido directamente en el body, primero se disparará el CLICK del botón. Cuando termine de ejecutar su código, llamará al CLICK del div a, si lo hubiera. Cuando termine, Llamára al CLICK del body.
Eso permite optimizar mucho código repetitivo, y también como es tu caso, capturar eventos de elementos que cuando carga la página, no existen.

Otra alternativa es declarar el CLICK del boton del formulario en la misma función de AJAX donde insertas el formulario en la página.

[coloradocanyon]

perfecto.

un saludo y gracias...