Question

I have this site here

As you can see there is a tiny image slider for “Images” and “Web Templates” tabs where the images are sliding from right to left, then disappears and then it appears at the very end of the parent element (an <tr> in my case).

If you hover over the small images you can see it’s preview on the left.

So far so good.

But if you wait until the first images comes again, the hover event doesn’t work anymore.

It is possible that jquery can’t see that new appended elements at the end of the <tr> tag?

Answer 1

The way you are binding your events will not work for dynamically added elements. In preview_script.js you have:

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

This will add eventhandlers to all img tags with class “box_body”, but ones that are appended later will NOT get the event.

Try this:

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

This will add the event to document, and only fire it if the eventtarget is img with class = “box_body”. Since events propagate up this should work as long as nothing in between stops it before it reaches document (by calling “event.stopPropagation()”)

If you know the PARENT of “.box_body img” you can replace document with that, this will work a little better as you don’t have to wait for the event to propagate up to document.

Note that you can accomplish the same thing using delegate (if on is not available):

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