eventos jquery no funciona para elementos adjuntas

Question

que tengo este sitio here

Como se puede ver hay un pequeño regulador de la imagen de "imágenes" y las pestañas "Plantillas Web" donde las imágenes están deslizando de derecha a izquierda , luego desaparece y luego aparece al final del elemento principal (un <tr> en mi caso).

Si pasa el puntero sobre las imágenes pequeñas, verá que se muestra la vista preliminar de la izquierda.

Hasta ahora todo bien.

Pero si espera hasta que aparezcan las primeras imágenes, el evento de vuelo estacionario ya no funciona.

Es posible que jquery no pueda ver los nuevos elementos añadidos al final de la etiqueta <tr>?

Answer 1

La forma en que vincula sus eventos no funcionará para los elementos añadidos dinámicamente. En preview_script.js tiene:

$(".box_body img").hover(function(){ 

Esto añadirá manejadores de sucesos a todas las etiquetas img con clase "box_body", pero los que se adjuntan más adelante no conseguirá el evento.

Prueba esto:

$(document).on("hover", ".box_body img", function() {..}); 

Esto agregará el evento para documentar, y sólo disparar si el EventTarget es IMG con class = "box_body". Dado que los eventos se propagan, esto debería funcionar siempre y cuando nada entre ellos lo detenga antes de que llegue al documento (llamando a "event.stopPropagation()")

Si conoce el archivo PARENT de ".box_body img" puede reemplazar el documento por eso, esto funcionará un poco mejor ya que no tienes que esperar a que el evento se propague hasta el documento.

Tenga en cuenta que se puede obtener el mismo resultado utilizando delegado (si el no está disponible):

$(document).delegate(".box_body img", "hover", function() {..}); 

Answer 2

Usted tendrá que usar la función .live() de jQuery con el fin de asociar controladores de eventos a los elementos que se creará en el futuro. Aquí está el doc: http://api.jquery.com/live/ aquí es el uso de:

$(".dynamicButtons").live("hover", function() { 
    //do stuffs 
}); 

Answer 3

Parte del código no será muy útil.

¿Está Borrando elementos desde el principio y luego insertándolos al final del control deslizante?

Si la respuesta es "sí", debe utilizar

$('selector').delegate('subselector', 'hover', function() { 
    //your code there 
}); 

en lugar de

$('selector subselector').hover(function() { 
    //your code there 
}); 

favor verifique http://api.jquery.com/delegate/ para más información.

Answer 4

Le sugiero que use livequery que lo ayudará a llevarse bien con los elementos recién agregados en su javascript.Un ejemplo de uso sería:

$('.elementAdded').livequery('event',function(){ 
    //do stuff 
}) 

tuve varios problemas utilizando .on() ya que será obligado a eventos elementos sólo una vez (después de documento listo, por ejemplo).

Espero que ayude.

Answer 5

En el archivo de cambio script.js aquí http://web-art.netau.net/script.js

$(".box_body img").hover(function(){ 
      var src=$(this).attr("src"); 
      var target=$(this).parents("table").attr("id").split("_").pop(); 
      $("#preview_"+target).attr({src:src}); 
}) 

línea de 112 a 116 a la siguiente

$(document).on('mouseenter',".box_body img",function(){ 
     var src=$(this).attr("src"); 
     var target=$(this).parents("table").attr("id").split("_").pop(); 
     $("#preview_"+target).attr({src:src}); 
}); 

La razón detrás de esto se ha contestado muchas veces en SO. Busca y encuentra una buena respuesta. Al igual que

Event binding on dynamically created elements?

In jQuery, how to attach events to dynamic html elements?

jquery binding events to dynamically loaded html elements