Set the mouseover Attribute of a div using JQuery

Question

Hello all,

I would like to set an attribute for a div. I have done this:

$('#row-img_1').onmouseover = function (){ alert('foo'); };
$('#row-img_2').onmouseout = function (){ alert('foo2'); };

However, the above has not worked, it does not alert when mouse is over or when it moves out.

I have also tried the $('#row-img_1').attr(); and I could not get this to work either.

I am aware that I should be using a more effective event handling system but my divs are dynamically generated. Plus this is a small project. ;)

Thanks all for any help.

Answer 1

Events are registered as functions passed as attributes, like this:

$('#row-img_1').mouseover(function (){ alert('foo'); });
$('#row-img_2').mouseout(function (){ alert('foo2'); });

Also, note the missing on from the onmouseover.

Answer 2

$('#row-img_1').bind('mouseenter', function(event){
    // event handler for mouseenter
});

$('#row-img_1').bind('mouseleave', function(event){
    // event handler for mouseleave
});

or use jQuerys hover event which effectivly does the same

 $('#row-img_1').hover(function(){
    // event handler for mouseenter
 }, function(){
    // event handler for mouseleave

 });

Answer 3

$('#row-img_1').mouseover(function() { 
    alert('foo'); 
});

Answer 4

You need to bind the event function to the element. Setting the event attributes has no effect, as they are interpreted only when the page is loading. Therefore, you need to connect the event callback in a different manner:

$('#row-img_1').mouseover(function() {
    alert('foo');
});
$('#row-img_2').mouseout(function() {
    alert('foo2');
});

In jQuery, there are two more events: mouseenter and mouseleave. These are similar, but mouseenter does not fire upon moving the mouse from a child element to the main element, whereas mouseover will fire the event again. The same logic applies to mouseleave vs mouseout.

However, jquery provides a shortcut for this kind of usage: the .hover method.