jQuery, writing if statement with .bind vs .focus looking for alternate way to execute

Question

Brief synopsis, this code works beautifully and does what it is supposed except with radio buttons on webkit.

$('input, textarea, select').focus(function(){
    $(this).parents('.row').addClass("hilite");
        }).blur(function(){
            $(this).parents('.row2').removeClass("hilite");
});

I did some research and tested it a few times and using

$('input, textarea, select').bind('change'(){
    $(this).parents('.row').addClass("hilite");
        }).blur(function(){
            $(this).parents('.row').removeClass("hilite");
});

I am able to get it to work with webkit radio buttons but it does not acknowledge the blur and therefor does not remove the hilite. So is there an alternate way to write this so it will remove the class on blur vs mouseleave (which does work). As always THANKS IN ADVANCE!

Answer 1

Try giving the :radio buttons a click event to force focus. Seems to work in webkit.

Try it out: http://jsfiddle.net/5dDQn/

$(':radio').click(function() {
    $(this).focus();
});

Answer 2

This approach probably doesn't qualify as 'pretty' but I'd try like so:

$('input, textarea, select')
  .focus(function() {
    $(this).parents('.row').addClass('hilite');
    if ($(this).is(':radio')) {
      $(this).one('mouseleave', function () {
        $(this).parents('.row').removeClass('hilite');
      });
    }
  })
  .blur(function() {
    $(this).parents('.row2').removeClass('hilite');
  });

That relies on what I believe you indicated - the radio buttons will accept focus, don't seem to trigger blur, but mouseleave seems to work properly.