[SOLUCIONADO] Eliminar fila de tabla dinámica

[X_fran]

Hola, será posible bindear el evento click de una etiqueta

Código HTML:

a

dentro de filas agregadas dinámicamente desde una BD para que funcione como boton para eliminar o editar el registro, o es obligatorio declarar el onclick de la etiqueta durante la creación de la tabla html ??

[homeres]

Buenas, puedes usar el método On() de JQuery 1.7, te permite capturar eventos de elementos creados posteriormente o dinámicamente como es tu caso. Échale un ojo a la documentación:

http://api.jquery.com/on/

Con este ejemplo podría servirte...

Código:

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

[X_fran]

Bueno, yo realmente probé con la función bind(), muy similar al .On(), y el resultado es que para el primer elemento al que se le aplica funciona, pero al resto de los elementos que se los apliqué no pinchaba, aunque mirando tu código no se lo hago a los tr, sino a las etiquetas a. son las etiquetas a que pongo en una celda las que deberían funcionar como boton para la llamada Ajax.

[andresgarciadev]

es por que el te quiso dejar la logica, esta bien lo q hizo homeres

Código Javascript:

$( "#dataTable tbody tr a.classname" ).on( "click", function() {
  $( this ).parents("tr").remove();
});
a cada a que quieras usar como boton dale un "class" y remplaza "classname" con ese nombre
de lo contrario solo borra ".classname" y funcionara con cualquier "a" dentro de la tabla
 

[X_fran]

Hola, muchas gracias por la respuesta, pues mas o menos así me funciona. ahora bien, estoy teniendo un problema y no se donde mi interpretación del javascript asíncrono me está fallando:

Estoy aprediendo a trabajar con symfony2 además, y tengo lo siguiente:
Muestro una vista que es la que incluye la tabla dinámica de la que posteé la duda.
Esa vista completa se carga como parte de una petición tradicional, en ella incluyo un bloque javascript vinculando el evento onclick como les comentee anteriormente, funciona perfecto el eliminar de cualquier fila via ajax (gracias por su aydua en eso);
Y además, incluyo un vínculo en la vista que al hacer click me recarga vía ajax solamente la tabla incluida en la vista (llamo al miso controller pero en él valido si es asíncrono o no, y en dependencia me muestra una plantilla o un fragmento que no hereda de nadie)
Mientras no haga esa llamada al vinculo, las etiquetas de eliminar funcionan, pero una vez que pincho y se sustituye la tabla, los vinculos de borrar de las filas no funcionan, y por supuesto como les dejo el href, pues hacen la peticion a ese routing.

si doy clic derecho en la pagian y muesto el codigo fuente de la misma, solamente contiene la porción que se cargó vía ajax.

mi enfoque falla en algo, pero no se cómo resolverlo.
Qué creen ustedes ???

[X_fran]

Hola, pues he resulto de la siguiente forma dado que al sustituir la tabla en una llamada AJAX, se pierden los eventos asociados a los elementos a incluidos en la tabla, en el evento done de la llamada AJAX para el elemento a que refresca los datos, he vuelto a colocar el .on de los elementos a que forman parte de la tabla.
Aunque no me parece sea la solución más elegante así es como funciona.

No doy por solucionado aun por si alguien tiene una respuesta más elegante.

[X_fran]

Weno, buscando un poco he encontrado la solución óptima, se trata de aplicar el concepto de delegación de eventos (event delegation). Para mi caso en concreto, la respuesta del servidor a una acción de actualización de una tabla es un fragmento html que contiene los tr del tbody de la tabla, por tanto para que el evento asociado a las etiquetas a inlcuidas en las filas de la tabla se mantenga, se puede hacer de la siguiente manera:

Código:

$('#tablaDatos tbody').on('click', '.lnkEliminarRegistro', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $.ajax({
                        'datatypes': 'html',
                        'type': 'GET',
                        'url': url,
                        beforeSend: function() {
                            $('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
                        }
                    }).done(function(data) {

                    }).fail(function(jqXHR) {
                        $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
                    }).always(function(jqXHR, status) {
                        if (status !== 'success') {
                            $('#indicador').fadeOut(5500, function() {
                                $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                            });
                        } else {
                            $('#indicador').fadeOut('fast', function() {
                                $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                            });
                        }
                    });
                });

de esta manera al refrescar el contenido del tbody, se mantiene la asociación del evento.