Jquery off click function?

Question

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?

Otherwise known as `onmouseup`? or do you mean, clicking on anything that isn't the element or a child of the element. — Kevin B, Mar 27 '13 at 20:50
What exactly does "click off of" mean? Choosing another radio button? — JJJ, Mar 27 '13 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? — Ant P, Mar 27 '13 at 20:50
you could either bind a click event to the container around the radio button to hide the navLeft — scrappedcola, Mar 27 '13 at 20:51

score 5 · Answer 1 · answered Mar 27 '13 at 20:50

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();
});

answered Mar 27 '13 at 20:50

Blazemonger

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(); }); }); – Nat Mar 27 '13 at 20:51
That doesn't format in a comment. Please create a http://jsfiddle.net or add it to your original question. – Blazemonger Mar 27 '13 at 20:52
@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`) – p.s.w.g Mar 27 '13 at 20:56
+1 I didn't realize you could do `.click` on `document` but it seems cleaner than my answer. – p.s.w.g Mar 27 '13 at 20:57
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 – Nat Mar 27 '13 at 22:00

score 3 · Accepted Answer · answered Mar 27 '13 at 20:51

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();
});

answered Mar 27 '13 at 20:51

p.s.w.g

2 Answers2