Question

I have a jQuery issue I can’t get past:

(function ($) {
var links = new Array();
var vidFrame = document.getElementById('videoFrame');
links = $('.video');

$(links).each(function() {
    $(this).bind('mouseenter', function() {
         $(vidFrame).attr('src',$(this).attr('href'));        
       window.frames[0].location.reload();
});
});

}(jQuery));

vidFrame is an iframe, links is a collection of links that (right now) link back to some content. I’m trying to get the click event assigned to each link so that mousing over that link broadcasts its source video into the iframe. I want to leave the original link info in the a href so that if JavaScript is disabled, the links just take you to the content instead.

The window.frames statement supposedly reloads the iframe but I haven’t got far enough to test it.

The script gets the right href, it just doesn’t bind it properly. I think the $(this) statement is scoped correctly, I was logging to the console and getting the links I wanted, but for some reason the events don’t bind?

This is an area I’ve had trouble with before, specifically mixing JavaScript and jQuery within the each() loop. I’d really be into any insight.

Answer 1

There are a few things to point out in your code. You declare links as an array, the you overwrite it with a collection of jQuery objects and you double wrap it in a jQuery object when you call the each() loop… doesn’t make much sense.

To call an event you don’t need an each() loop, you can just call it on the jQuery collection. The two $(this) you’re using inside the loop are misleading, you should cache it first thing like var that = $(this). Also, bind() is no longer used. You can use on() or the click() shortcut.
The iframe should refresh when you pass in the new src. Take a look at Ajax Reload iframe.

var $links = $('.video'),
    $frame = $('#videoFrame');

$links.mouseenter(function(){
    $frame.attr('src', $(this).attr('href'));
});