6

this may sound like a silly questions but is there something I can call for offclick events for exmaple I have this currently;

$("#frame_left").click(function() {
    $("#navLeft").show();
});

I want to hide the #navLeft content once a user has clicked off of the radio button?

Improve this question
4
  • Otherwise known as onmouseup? or do you mean, clicking on anything that isn't the element or a child of the element. Commented Mar 27, 2013 at 20:50
  • 2
    What exactly does "click off of" mean? Choosing another radio button? Commented Mar 27, 2013 at 20:50
  • Give each of your radio buttons a class, register a Click event to that class and check if the desired radio button is selected? Commented Mar 27, 2013 at 20:50
  • you could either bind a click event to the container around the radio button to hide the navLeft Commented Mar 27, 2013 at 20:51

2 Answers 2

Reset to default
5

Add a click event for the entire document:

$(document).click(function(e) {
  $('#navLeft').hide();
});

Then stop propagation on the element, so it doesn't bubble up to the document:

$("#frame_left").click(function(e) {
  e.stopPropagation();
  $("#navLeft").show();
});

http://api.jquery.com/event.stopPropagation/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I have this so far already - $(document).ready(function(){ // do your checks of the radio buttons here and show/hide what you want to $("#navLeft").hide(); $("#navRight").hide(); // add functionality for the onclicks here $("#frame_left").click(function() { $("#navLeft").show(); }); $("#frame_right").click(function() { $("#navRight").show(); }); }); </script>
That doesn't format in a comment. Please create a jsfiddle.net or add it to your original question.
@Nat read the answer more carefully. Blazemonger is telling you to use $(document).click not $(document).ready (although you should call .click inside of .ready)
+1 I didn't realize you could do .click on document but it seems cleaner than my answer.
I tried your example Blazemonger, but I have a few issues, one when you click anywhere outside the radio button the content that is shown disappears even though the radio button is still selected. Also If I set this up for more than one radio button if I click one option then change my mind and click another option it keeps both content displayed instead of hiding my first option and then showing the 2nd radio button i selected
3

This should work for you:

$('html').click(function() {
    $("#navLeft").hide();
});

And then be sure to prevent the event from propagating when clicking the #frame_left element:

$("#frame_left").click(function(e) {
    $("#navLeft").show();
    e.stopPropagation();
});
Improve this answer

1 Comment

Thanks a bunch, and to everyone else that helped

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.