How to change the "freeze" function to the 'on' function?

Question

I need to use the 'on' function instead of the "hover". This is the old code:

$('.field').hover( function() { old_value=$(this).text(); item_id=$(this).attr('id'); item=$(this).parent('td'); new_value=(old_value=='Not translated') ? '' : old_value; $(this).empty(); var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+ "<div style='overflow: hidden; padding-right: .5em;'>"+ "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>"; $(this).html(field); }, function() { $(this).empty(); $(this).html(old_value); }); 

And this is the new code:

  $('.field').on('hover', function(event) { old_value=$(this).text(); item_id=$(this).attr('id'); item=$(this).parent('td'); new_value=(old_value=='Not translated') ? '' : old_value; $(this).empty(); var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+ "<div style='overflow: hidden; padding-right: .5em;'>"+ "<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>"; $(this).html(field); }, function(event) { $(this).empty(); $(this).html(old_value); }); 

The old code works well, but the new one does not work (only the mouseout function works). Please tell me where I made a mistake? Thanks.

Answer 1

The easiest way to do this, perhaps bind to mouseenter and mouseleave separately (this is just what hover is anyway). Here is the jQuery source for the .hover() method :

 function (fnOver, fnOut) { return this.mouseenter(fnOver).mouseleave(fnOut || fnOver); } 

You can pass the event name map to event handlers in .on() :

 $('.field').on({ mouseenter: function (event) { // First function passed to hover }, mouseleave: function (event) { // Second function passed to hover } }); 

But there is nothing wrong with .hover() , so you can just stick with it.

Answer 2

According to the jQuery API Documentation , the pseudo-event name "hover" (used for "mouseewave mouseleave") is deprecated since v1.8 and you should use two event handlers instead:

 $('.field').on({mouseenter: function (e) { /* code */ }, mouseleave: function (e) { /* code */ } });