Question

I have a form with 2 divs that each contains a set of fields.

I would like to do something like this:

$(document).ready( function(){
  $(".sectionBox").click( function(){
      $(this).removeClass('dim');
      $(".sectionBox").not(this).addClass('dim')
  });
});

This works very nicely if the user clicks the div itself or an <input> field. But, it does not work if the user clicks a <select> field – the drop-down appears and my div doesn’t respond at all. How can I ensure they respond:

1. for select boxes? (required)
2. for everything? (preferable)

Thanks a lot!

---

Clarification

Guys, thanks a lot for your responses thus far. I want to simply add .dim to the container div if the div itself or anything inside that div is clicked/focussed on. @LiangliangZheng and @wdm – your solutions seem to add .dim to multiple elements (I just want the container div).

This is where I am at the moment:

$(".sectionBox").click( function(){
    $(this).removeClass('dim');
    $(".sectionBox").not(this).addClass('dim');
});
$("select").focus( function(){
    $(".sectionBox").addClass('dim');
    $(this).parent(".sectionBox").removeClass('dim');
});

This appears to work. Is there anything I should do to make the above more robust?

Answer 1

I make some assumption about your question, here is the code I would suggest:

$(document).ready( function(){
  $(".sectionBox *").focus( function(){
      var $t = $(this).closest('.sectionBox')
      $t.removeClass('dim');
      $(".sectionBox").not($t).addClass('dim');
    })
    .click(function(){$(this).trigger('focus')});
});

You can see the fiddle here http://jsfiddle.net/xy8VC/4/

update:

$(document).ready( function(){
  $(".sectionBox").addClass('dim');

  $(".sectionBox")
  .click( function(){
      $(this).removeClass('dim');
      $(".sectionBox").not(this).addClass('dim')
  })
  $(".sectionBox *").focus( function(){
      $(this).closest(".sectionBox").trigger('click');
    });
});

http://jsfiddle.net/xy8VC/6/

First of all, I want to point it out that my 1st attempt would also add ‘dim’ to your container. And if you are happy to adopt the code you found, there are three points I would like to share :

$(document).ready(function(){
    // Since your containers are not dynamic, wrap 
    // them into an array, so you don't need to call 
    // $() to select the containers every time.
    var $box = $('.sectionBox'); 
    $box.addClass('dim');

    $box.click( function(){
        $(this).removeClass('dim');
        $box.not(this).addClass('dim');
    });
    // Also have input included.
    $box.find("select,input").focus( function(){ 
        $box.addClass('dim');
        // Replace parent() with closest() for more 
        // flexibility, unless you are sure that all fields 
        // are direct-children to your container.
        $(this).closest(".sectionBox").removeClass('dim'); 
    });
});

Try this : http://jsfiddle.net/xy8VC/8/