Foros del Web » Programando para Internet » Jquery »

Plugin de jQuery no aplica en elementos creados dinamicamente

Estas en el tema de Plugin de jQuery no aplica en elementos creados dinamicamente en el foro de Jquery en Foros del Web. Hola a todos, tengo en mi aplicaciones la siguiente pagina (mostrare solo el contenido relevante): @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < div id = ...
  #1 (permalink)  
Antiguo 01/01/2010, 21:22
 
Fecha de Ingreso: junio-2009
Mensajes: 79
Antigüedad: 15 años, 5 meses
Puntos: 0
Plugin de jQuery no aplica en elementos creados dinamicamente

Hola a todos, tengo en mi aplicaciones la siguiente pagina (mostrare solo el contenido relevante):

Código HTML:
Ver original
  1. <div id="table_div">
  2.         <table id="tiendas_list" class="tablesorter">
  3.             contenido de tabla...
  4.         </table>
  5.     </div>
  6.     <div id="pager" class="tablesorterPager">
  7.         contenido de paginador...
  8.     </div>
  9.    
  10.     <!--DIV PARA EJECUTAR CONSULTAS DEL ASYNC-->
  11.     <div id="async_div"></div>

Estoy utilizando el plugin de tablesorter para darle estilo a mi tabla y permitir que se puedan ordenar los registros, se ejecuta al cargar la pagina:

Código Javascript:
Ver original
  1. $("#tiendas_list")
  2.             .tablesorter({widthFixed: true, widgets: ['zebra'],
  3.                 headers: {
  4.                     2: {
  5.                         sorter: false
  6.                     },
  7.                     3: {
  8.                         sorter: false  
  9.                     }
  10.                 }
  11.             })
  12.             .tablesorterPager({container: $("#pager")});

Y ademas en cada registro de la tabla tengo un boton que al hacerle click elimina ese registro de la base de datos y luego carga la misma tabla con los registros actualizados sin hacer refresh (igual les colocare las funciones relevantes):

Código Javascript:
Ver original
  1. $('#async_div').load('tiendas.async.php?async=4&id_tiendas='+id_tienda); //Eliminar tienda
  2. $('#table_div').load('tiendas.async.php?async=1');     //Trae de nuevo toda la tabla

Todo funciona perfectamente excepto que la tabla cuando vuelve a cargar no se le aplica el plugin, ya que este se aplica al cargarse la pagina obviamente cuando se ejecuta el load ya la pagina ha cargado. He intentado jugar con la funcion live de jQuery pero no he logrado nada. Alguien sabe que puedo hacer para solucionarlo? O alguna manera de eliminar registros sin tener que cargar la tabla de nuevo?

Gracias de antemano!

EDIT: el contenido de 'tiendas.async.php?async=1' es toda la tabla exactamente como se muestra al cargar la pagina por primera vez (mismos ids, clases, etc).

Última edición por bengiss; 01/01/2010 a las 21:24 Razón: Mostrar contenido de tiendas.async.php?async=1
  #2 (permalink)  
Antiguo 04/01/2010, 01:23
 
Fecha de Ingreso: junio-2008
Ubicación: Colombia
Mensajes: 207
Antigüedad: 16 años, 6 meses
Puntos: 12
Respuesta: Plugin de jQuery no aplica en elementos creados dinamicamente

live solo aplica a elementos que sean acivados por acciones del usuario como click o mouseover etc pero cuando el usuario no ejecuta accion directa sobre el elemento en este caso tu tabla a la cual le aplicaras el plugin sin interacicon directa con el usuario tienes la opcion del livequery, un excelente plugin que permite este tipo de acciones

un pequeño ejemplo:

Código PHP:
<!-- Cargas libreria del livequery-->
<
script type="text/javascript" src="javascript/jquery.livequery.js"></script>


<script language="javascript">
$(document).ready(function(){
    $('#miTabla').livequery(function(){
          $(this).tablesorter();//Aplicas el plugin o lo que sea a este nuevo elemento  creado
   });

}); 

</script> 
Para elementos añadidos al DOM que requieran interaccion como click usamos algo como

Código PHP:
$(document).ready(function(){
    $(
'.btNew').livequery('click',function(){
          $(
this).slideUp('slow');//Aplicas el plugin o lo que sea a este nuevo elemento  creado
   
});

}); 
espero e sirva saludos

Etiquetas: dinamicamente, elementos, plugin
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:50.