JQuery - Detecting a click anywhere inside a div (including other elements)
<p>I have a form with 2 divs that each contains a set of fields.</p>

<p>I would like to do something like this:</p>

<pre><code>$(document).ready( function(){
  $(".sectionBox").click( function(){
      $(this).removeClass('dim');
      $(".sectionBox").not(this).addClass('dim')
  });
});
</code></pre>

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

<ol>
<li>for select boxes? (required)</li>
<li>for everything? (preferable)</li>
</ol>

<p>Thanks a lot!</p>

<hr>

<h3>Clarification</h3>

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

<p>This is where I am at the moment:</p>

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

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