CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tartar
Tartar

Reputation: 5452

Jquery events does not work

I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?

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

Upvotes: 3

Views: 194

Answers (6)

voigtan
voigtan

Reputation: 9031

you could bind many events and look at the event.type and toggle the class you want:

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

Upvotes: 1

Krish R
Krish R

Reputation: 22711

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

});

Upvotes: 3

Anup
Anup

Reputation: 9738

Your Jqueries might be conflicting :-

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='';
   });
});

Upvotes: 1

David Ansermot
David Ansermot

Reputation: 6112

Try to use the code :

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

or

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

and you can too

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

Upvotes: 3

WheretheresaWill
WheretheresaWill

Reputation: 6480

It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.

See my fiddle:

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='';
   });

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You can use addClass() and removeClass()

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

Upvotes: 2

Related Questions