Los elementos agregados dinámicamente no activan la animación.

En mi plugin algunos elementos cerrarán la barra lateral. Por ejemplo, si en una barra lateral hay una lista:

  • element 1
  • element 2
  • element 3

li elementos li activarán la animación de cierre. Mi problema es que si algunos elementos se cargan de forma asíncrona, el complemento no “verá” esos elementos y la animación no se activará. No es solo AJAX . Estoy hablando de todos los elementos cargados dinámicamente .

El código es realmente simple y aquí hay un ejemplo:

 var $elements = 'li'; $elements.click(function() { $sidebar.animate({ //animation }); }); 

¿Cómo puedo hacer que esos elementos sean visibles para el complemento?

Aquí el código completo https://github.com/dcdeiv/simple-sidebar/blob/master/jquery.simplesidebar.js

Los elementos dynamics no activan la callback, porque no hay detectores de eventos vinculados a esos elementos dynamics.
Si desea manejar eventos a elementos que aún no existen, o usar un selector que seleccionará elementos que se agreguen dinámicamente, debe delegar el evento:

 $(document).on('click', 'li', function() { //handle }); 

Este código vincula a un detector de clics en el propio documento, y se invocará la callback para cada clic registrado, siempre que li elemento sea un elemento secundario del elemento al que está vinculado el oyente. Por ejemplo:

 
test
test2

Considere este código:

 var outer = $('#foo'); $('#bar').on('click', 'span', function() { outer.append($('Added')); }); 

Esto agregará espacios a la div foo cada vez que se haga clic en el espacio dentro del elemento de barra. No se invocará cuando haga clic en intervalos que no sean hijos de


Este código, sin embargo:

 $('#foo').on('click', 'span', function() { console.log(this); }); 

reactjsrá a los clics en todos los intervalos dentro del elemento

. Dinámico y estático por igual, incluso el lapso dentro de la bar div.

Regla básica: lea estos fragmentos de código de la siguiente manera:

 $(document).on('click', 'div', function(){});     on event in  for elements matching , apply  

Puede enlazar el elemento después de que se representa en la página.
Utilice la función de enlace jquery.

    Intereting Posts