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

苏尼尔

我有一个包含html和jQuery代码的网页,如下所示。我已订阅ID为的输入文本框的悬停事件firstname,但是将鼠标悬停在文本框上时不会触发。我已将此事件代码放置在文档就绪事件中。

此问题的演示位于以下URL:演示示例

问题:我在下面的订阅悬停事件的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>

更新

根据答案,我更新了演示示例。您可以在以下URL看到修改后的示例:正在运行的修改后的演示示例

在此修改后的示例中,我刚刚遵循了DinoMyte建议的方法,即在处理jquery中的悬停效果/事件时使用以下格式: jQueryObject.hover(on function when hovering starts, off function when hovering out)

DinoMyte

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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使文本框数组不起作用

来自分类Dev

尝试在文本框上输入表单并使用jquery ajax输入新闻不起作用

来自分类Dev

数据绑定到文本框不起作用

来自分类Dev

jQuery自动完成动态生成的文本框不起作用

来自分类Dev

Bootstrap输入掩码在动态文本框中不起作用?我能做些什么?

来自分类Dev

动态添加文本框不起作用

来自分类Dev

Python Selenium:输入文本框,send_keys不起作用

来自分类Dev

Javascript到空白文本框值将不起作用,但jquery可以

来自分类Dev

当焦点位于文本框中时,单击时的jQuery不起作用

来自分类Dev

使用jQuery尝试更改文本框的背景颜色,但在wordpress中不起作用

来自分类Dev

jQuery函数仅允许文本框中的字母不起作用

来自分类Dev

输入文本框验证在Vue js中不起作用

来自分类Dev

更改文本框的值不起作用

来自分类Dev

在文本框VBA中输入时,用户窗体按钮不起作用

来自分类Dev

自动完成文本框.NET不起作用

来自分类Dev

项目模板中的文本框验证不起作用

来自分类Dev

jQuery悬停事件不起作用

来自分类Dev

OnClick按钮刷新文本框不起作用

来自分类Dev

类型文本后,innerHTML文本框不起作用

来自分类Dev

数据绑定到文本框不起作用

来自分类Dev

jQuery自动完成动态生成的文本框不起作用

来自分类Dev

HTML输入文本框占位符在Visual Studio环境外部不起作用

来自分类Dev

为什么Jquery对于asp.net文本框的CssClass属性不起作用?

来自分类Dev

文本框为空时,onkeyup不起作用

来自分类Dev

在输入上更新输入文本框的数据值不起作用

来自分类Dev

使用jQuery尝试更改文本框的背景颜色,但在wordpress中不起作用

来自分类Dev

来自文本框的输入并添加到列表中不起作用

来自分类Dev

输入时文本框没有 KeyboardFocus,因此 KeyBindings 不起作用

来自分类Dev

动态文本框的 Fire TextChanged 事件不起作用

Related 相关文章

  1. 1

    使文本框数组不起作用

  2. 2

    尝试在文本框上输入表单并使用jquery ajax输入新闻不起作用

  3. 3

    数据绑定到文本框不起作用

  4. 4

    jQuery自动完成动态生成的文本框不起作用

  5. 5

    Bootstrap输入掩码在动态文本框中不起作用?我能做些什么?

  6. 6

    动态添加文本框不起作用

  7. 7

    Python Selenium:输入文本框,send_keys不起作用

  8. 8

    Javascript到空白文本框值将不起作用,但jquery可以

  9. 9

    当焦点位于文本框中时,单击时的jQuery不起作用

  10. 10

    使用jQuery尝试更改文本框的背景颜色,但在wordpress中不起作用

  11. 11

    jQuery函数仅允许文本框中的字母不起作用

  12. 12

    输入文本框验证在Vue js中不起作用

  13. 13

    更改文本框的值不起作用

  14. 14

    在文本框VBA中输入时,用户窗体按钮不起作用

  15. 15

    自动完成文本框.NET不起作用

  16. 16

    项目模板中的文本框验证不起作用

  17. 17

    jQuery悬停事件不起作用

  18. 18

    OnClick按钮刷新文本框不起作用

  19. 19

    类型文本后,innerHTML文本框不起作用

  20. 20

    数据绑定到文本框不起作用

  21. 21

    jQuery自动完成动态生成的文本框不起作用

  22. 22

    HTML输入文本框占位符在Visual Studio环境外部不起作用

  23. 23

    为什么Jquery对于asp.net文本框的CssClass属性不起作用?

  24. 24

    文本框为空时,onkeyup不起作用

  25. 25

    在输入上更新输入文本框的数据值不起作用

  26. 26

    使用jQuery尝试更改文本框的背景颜色,但在wordpress中不起作用

  27. 27

    来自文本框的输入并添加到列表中不起作用

  28. 28

    输入时文本框没有 KeyboardFocus,因此 KeyBindings 不起作用

  29. 29

    动态文本框的 Fire TextChanged 事件不起作用

热门标签

归档