2

I've got some html that displays a list of youtube vidz which is supposed to have a hover action on it. When I create a static of this list, it works fine, but when I try to dynamically create it with jquery, the list renders but the hover effect doesn't work. I've uploaded it to my site to make it easier to see (too many .js files to load into a fiddle).

http://me.thefaheyfamily.com/videos.html

On that page, the first video is the static one and the rest (below it on a separate row) are loaded dynamically, which don't work. I tried excluded some .js files thinking there may be a conflict somewhere but it seems to be that the style isn't getting applied to the dynamic code.

Any help/direction is appreciated!

Robert
  • 1,696
  • 3
  • 36
  • 70
  • Don't just post a link to an entire web site. Reduce your problem to a small exerpt that you can show here, and perhaps in a fiddle as well. – Barmar Jul 06 '13 at 03:22
  • In my FF both are working same...only thing i investigated is the hovering image is coming at side of videos in the below list – swapnesh Jul 06 '13 at 03:22
  • @Barmar understood but sometimes when a site is just too large to reduce to a fiddle or something similar, you don't have much of a choice. I tried to put it in a fiddle but the time I was spending excluding code, resources, etc. was really just wasting my time. -swapnesh I'm using Chrome ATM and didn't test in anything else....but that help me a bit. I now know it seems to be a Chrome/IE thing, maybe. – Robert Jul 06 '13 at 03:27
  • I looked at the link provided by Barmar but this talks about using the hover event and wiring a button up to it. I'm using CSS to handle the hover event, and in my jquery, there is no assigning of this event, just assignment to a specific class which does it. – Robert Jul 06 '13 at 03:37

3 Answers3

3

It's because you add animations with jQuery BEFORE the dynamic content is added in the page. jQuery is not like CSS, if you select a class with jQuery and apply animations to it, it won't be added on new elements, jQuery look only at what is in the page when it's called.

To quickly test this, open your browser JavaScript console and call your hover_overlay(); function after the page is loaded, you'll see animations are added to dynamically added content now.

WiMantis
  • 376
  • 3
  • 11
  • Sounds logical...thoughts on how to fix it? I'm fairly new with JS, JQuery and all. – Robert Jul 06 '13 at 04:25
  • 1
    The quick fix to this would be to call `hover_overlay();` after dynamic content have been added to the page with `$("#list").append($(html_data));` but it'll duplicate events on elements that where already in the page at the beginning. To prevent this, you could target specific parts of your page in the `hover_overlay()` function instead of the whole page by passing a parent jQuery selector and using the jQuery .find() method, or add an attribute to elements that have animations added and skip them when you call `hover_overlay()` again. Google "jquery .attr()" for more infos ! – WiMantis Jul 06 '13 at 04:46
  • Just getting back around to trying this....and it works great. Thanks for the help, much appreciated! – Robert Aug 26 '13 at 20:12
1

If you prefer to use jquery, then use "on" event which support dynamically generated events easily.. you can write the code as

$(document).on("mousedown","id-of-element-to-be-hoverd",function(e){
     Your code....
});
Ichigo Kurosaki
  • 3,765
  • 8
  • 41
  • 56
0

Why not just use CSS?

.hover_image{
  transition: all 1s ease-in;
}
.hover_image:hover{
  opacity: 0.2
}
Reza Khadjavi
  • 119
  • 7
  • this produces the same results....the static content works while the dynamic content doesn't. – Robert Jul 06 '13 at 03:45