Remove Attributes onmouseover and onmouseout

Question

Hello all,

I am trying to make use of JQuery's remove attribute like this:

$('#rom-img_1').removeAttr('mouseover');
$('#rom-img_2').removeAttr('mouseout');

However, it does not remove the effects of the events as the events are still triggered on mouseover and on mouseout. I have tried adding "on" before the events names too but JQuery doesn't use it like that.

Why isn't this working and how can I remove those attributes.

This is a bit of the HTML:

<div onmouseout="$('#heart_401').css({'display':'none'});" onmouseover="$('#heart_401').css({'display':'block'});" id="row-img_11"></div>

Thanks all for any help

Answer 1

Never register event handlers by using onsomething in the html code. It makes your markup less readable and causes various problems (such as this not pointing to the element).

Always register them by using $(...).mouseover(function() { /* yourcode */ }) or $(...).bind('mouseover', function() { /* yourcode */ }).

Then you can easily remove the handlery by using $(...).unbind('mouseover').

Of course you can also use other handlers like click or focus instead of mouseover.

The reason why removeAttr doesn't work is that handlers aren't attributes. Internally they are turned into handlers and thus you cannot remove them by removing the attribute. However, this might work:

$('#rom-img_1')[0].mouseover = function() {};
$('#rom-img_1')[0].mouseout = function() {};

Answer 2

$('#rom-img_1')

You've mis-spelled row-img_11. jQuery doesn't error this, you just get a selector result with no matches.

removeAttr of onmouseover works for me with this fixed, although you would generally want to avoid using inline event handler attributes like this.

Answer 3

To get and set mouseover and mouseout events in jQuery use .mouseover() and .mouseout(). Syntax as follows:

Set (remove in this case):

$("#row-img_11").mouseover("");
$("#row-img_11").mouseout("");

• http://api.jquery.com/mouseover/
• http://api.jquery.com/mouseout/

To apply the methods to a group of divs:

$("div:contains('row-img')").each(function() {
    $(this).mouseover("");
    $(this).mouseout("");
});

Answer 4

If you just spell the id right, it works just fine:

$('#row-img_11').removeAttr('onmouseover').removeAttr('onmouseout');