События 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

можно связать множество событий и посмотреть на 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); 
    }); 
}); 

Answer 2

Попробуйте использовать код:

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

или

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

и вы можете слишком

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

Answer 3

Ваши 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 4

Вы можете использовать addClass() и removeClass()

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

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

$(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); 
     }); 

});