Question

我有一个带有html和jQuery代码的网页，如下所示。我已经订阅了id为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>

更新

根据答案，我更新了演示示例。您可以在此网址上看到修改后的示例：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替代方法。

更新：如果您希望在悬停时触发开关效果，您可以执行以下操作：

 $(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/

输入文本框的jQuery悬停事件不起作用

2 个答案: