Jquery事件不起作用

Question

我試圖在某些鼠標事件中更改某些輸入元素的類，但只有mouseover和mouseout事件正在工作，這可能是什么原因造成的？

    $(document).ready(function(){
       $('.registerFormElements').mouseover(function(){
               this.className='bright';
       });
       $('.registerFormElements').mouseout(function(){
               this.className='';
       });
       $('.registerFormElements').focus(function(){
           this.className='bright';
       });
       $('.registerFormElements').blur(function(){
           this.className='';
       });
    });

Answer 1

嘗試使用代碼：

$(this).attr('class', '');

要么

$(this).attr('class', 'myClass');

你也可以

$(this).addClass('myClass');
$(this).removeClass('myClass');

Answer 2

$(document).ready(function(){               
        var classname= 'bright';    
        /*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
        var formElement = $(".registerFormElements");       
        /*Used chaining*/
        formElement.on( "mouseover focus", function() {                     
            $(this).addClass(classname);
        })
        .on( "mouseout blur", function() {                              
            $(this).removeClass(classname);
       });

});

Answer 3

你可以使用addClass（）和removeClass（）

 $(this).removeClass(); //It clears all classes
 $(this).addClass('MyClass'); 

Answer 4

您的Jqueries可能存在沖突： -

var $j = jQuery.noConflict();

$j(document).ready(function(){
   $j('.registerFormElements').mouseover(function(){
           this.className='bright';
   });
   $j('.registerFormElements').mouseout(function(){
           this.className='';
   });
   $j('.registerFormElements').focus(function(){
       this.className='bright';
   });
   $j('.registerFormElements').blur(function(){
       this.className='';
   });
});

Answer 5

它似乎對我有用。 檢查你的班級名稱中沒有拼寫錯誤。 此外，通過焦點你的意思是選項卡輸入？ 這是觸發焦點事件的原因。

看我的小提琴：

http://jsfiddle.net/AdqzA/

   $('.registerFormElements').mouseover(function(){
        this.className='bright';
   });
   $('.registerFormElements').mouseout(function(){
        this.className='';
   });
   $('.registerFormElements').focus(function(){
       this.className='bright';
   });
   $('.registerFormElements').blur(function(){
       this.className='';
   });

Answer 6

你可以綁定很多事件並查看event.type並切換你想要的類：

$(document).ready(function(){
    $('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
        var element = $(this);
        var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
        var hasFocus = element.is(':focus');

        element.toggleClass('bright', shouldHaveBright || hasFocus);
    });
});