jQuery not binding properly

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.

I don't understand why you are first defining "links" as a new Array and then assigning it to elements with a video class? Also, bind has been deprecated since version 7.1. Use $(this).on('mouseenter',,, or just $(this).mouseenter(function(... — ron tornambe, Feb 23 '12 at 01:16

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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'));
});

That's exceptional help, thanks. I gather that if bind has been deprecated, that would explain why I've been having such awful problems with it. The array declaration was a quick fix, before I declared it explicitly, each was assigning only the href from the first link (I couldnt understand that either). Thanks for the help, I'll give it a shot. — user173361, Feb 23 '12 at 01:26

jQuery not binding properly

1 Answers1