Событие jQuery hover для ввода текстового поля не работает

Question

У меня есть веб-страница с кодом html и jQuery, как показано ниже. Я подписался на событие hover входного текстового поля с идентификатором firstname, но он никогда не срабатывает при наведении курсора на текстовое поле. Я разместил этот код события в событии готовности документа.

Демо на этот вопрос находится по этому адресу: demo sample

Вопрос: Что плохого в коде JQuery, что у меня есть ниже для подписки на события парения? Моя цель - применить класс highlight всякий раз, когда текстовое поле зависнет.

Html код

<style> 
    .highlight { 
    background-color: yellow; 
    border: 1px red solid; 
    } 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<table> 
    <tr class='class1'> 
     <td> 
     <!--some content here--> 
     I am a td element 
     </td> 
     <td> 
     <table> 
      <tr> 
       <td> 
        First Name 
       </td> 
       <td> 
        <input type='text' id='firstname'> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Last Name 
       </td> 
       <td> 
        <input type='text' id='lastname'> 
       </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
</table> 
<script> 
$(document).ready(function() { 
    var firstName = $('#firstname'); 
    firstName.on('hover', function() { 
     if($(this).hasClass('highlight') === false) { 
      $(this).addClass('highlight'); 
     } 
    }); 
}); 
</script> 

UPDATE

Исходя из ответов, я обновил демонстрационный образец. Вы можете увидеть измененный образец по этому адресу: modified demo sample that is working.

В этом модифицированном образце, я просто следовал подход, предложенный DinoMyte, который должен использовать следующий формат при работе с парения эффект/событие в JQuery: jQueryObject.hover(on function when hovering starts, off function when hovering out)

Answer 1

hover событие может быть переплетены, а не делегированы. Вам нужно заменить

firstName.on('hover', function() { 

с этим:

firstName.hover(function() { 

Рабочая: https://jsfiddle.net/DinoMyte/jmt4bmtm/

Если вы хотите делегировать это событие, вы должны использовать альтернативный подход с mouseover.

UPDATE: если вы хотите, чтобы вызвать включения-выключения эффекта на парении, вы можете сделать следующее:

$(document).ready(function() { 
     var firstName = $('#firstname'); 
     firstName.hover(function() 
     { 
     if($(this).hasClass('highlight') === false) 
     $(this).addClass('highlight'); 
     }, 
     function() 
     { 
     $(this).removeClass('highlight'); 
     } 
    ); 
}); 

Рабочий пример: https://jsfiddle.net/DinoMyte/jmt4bmtm/1/

Если делегация действительно важно для вашего решения, вы можете используйте следующий подход, используя mouse событий.

$(document).ready(function() { 
     var firstName = $('#firstname'); 
     firstName.on("mouseover",function() 
     { 
     if($(this).hasClass('highlight') === false) 
     $(this).addClass('highlight'); 
     }).on("mouseleave",function() 
     { 
     $(this).removeClass('highlight'); 
     }); 
}); 

Рабочий пример: https://jsfiddle.net/DinoMyte/jmt4bmtm/3/

Answer 2

Вы можете связать hover событие так:

$(document).ready(function() { 
    var firstName = $('#firstname'); 
    firstName.hover(function() { 
    $(this).addClass('highlight'); 
    }, function() { 
    $(this).removeClass('highlight'); 
    }); 
}); 

https://jsfiddle.net/av38Lvqs/