Ver Mensaje Individual
  #4 (permalink)  
Antiguo 29/11/2013, 04:35
Avatar de marlanga
marlanga
 
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: botón dinámico y ni caso

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

Código HTML:
Ver original
  1. <div id="directo">
  2.     <h2>Eventos de botones que no existe</h2>
  3.     <button class="add">Añadir boton</button>
  4. </div>
  5. <hr/>
  6. <div id="delegado">
  7.     <h2>Eventos de botones que no existe</h2>
  8.     <button class="add">Añadir boton</button>
  9. </div>

Código Javascript:
Ver original
  1. $(function(){
  2.    
  3.     $(".add").click(function(){ //Boton para añadir botones dinamicamente
  4.         $(this).parent().append('<button class="dinamico">pulsame</button>');
  5.     });
  6.    
  7.     $("#directo .dinamico").click(function(){ //Boton de evento directo.
  8.         //Cuando carga la pagina no existe ningún boton con la clase dinamico en el div directo
  9.         //Asi que no funcionará nunca.
  10.         alert("jamás funcionará");
  11.     });
  12.    
  13.     $("body").on("click","#delegado .dinamico",function(){
  14.         //Cuando carga la página, pone por ejemplo al BODY, que sí existe, a escuchar eventos
  15.         //del tipo CLICK. Cuando captura uno, comprueba si fue disparado por un boton con
  16.         //la clase dinamico metido en el div delegado.
  17.         alert("funciona");
  18.     });
  19. });

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.

Última edición por marlanga; 29/11/2013 a las 04:42