CODEWITHSUNDEEP
jquery
sscirrus
sscirrus

Reputation: 56719

JQuery - Detecting a click anywhere inside a div (including other elements)

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?

Upvotes: 4

Views: 4896

Answers (3)

Liangliang Zheng
Liangliang Zheng

Reputation: 1785

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/

Upvotes: 3

wdm
wdm

Reputation: 7189

Not sure if this is exactly what you're trying to do but check this demo out.

Demo: http://jsfiddle.net/wdm954/xy8VC/3/

Basically what I'm doing is applying the dim class to everything that is not in focus (excluding the label tags in this example). This allows only the focused field to be at full opacity.

EDIT: Changed my code a little to include a keyup event which allows this to work with tabbing.

$('.sectionBox').bind('click keyup', function() {
    $(this).removeClass('dim')
    .children().removeClass('dim')
    .not(':focus, label').addClass('dim');
});

Upvotes: 0

wesbos
wesbos

Reputation: 26317

You need to bind to the change event rather than the click event for the select box.

Upvotes: 0

Related Questions