Unbind all elements with jQuery.

Hey experts.
I have a site using jquery 1.8 / ui 1.9

I have a help button in the top right corner of the screen.

I'm trying to come up with a way so that when a user clicks on the help button, all the other click handlers are unbinded ( ... is that even a word ? )

When a user is done, and they click the finish button in the top right, all elements that were once binded, are again binded to their appropriate functions / methods.

I've been unsuccessful in tinkering through it so far, Hope there's some good suggestions out there.

Thanks
-s
LVL 1
ImaginxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Each time a user is working (click on the button) you set a variable or you set a class (for example active) to the button

in each button click event you check the variable OR if a button have the class (active)
if the variable is set OR button.class is found you break the execution: return false
0
GaryCommented:
To unbind is fairly easy, to rebind not so much (as far as I know)
Are you just trying to disable everything on the page while something else is happening?

One option is to use .on for all your bound events, then you can turn them on/off as you need.

p.s.
unbound
0
ImaginxAuthor Commented:
Rebinding is where I saw my obstacles.

.On is predominately used through the site -> .off() ?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

GaryCommented:
That is why I asked if disabling all elements is an option, certainly a lot easier to implement.
As for .on/.off I will have to play with it because I've never come across a situation like this.
Another option would be to overlay your page with a transparent div that blocks any interaction
0
ImaginxAuthor Commented:
I believe disabling would work fine.

I've thought about using the empty div, but i don't feel like it's the right approach IF there's a more intelligent route by unbinding / rebinding or using .on()/.off() as a means to activate / deactivate. If no other means, I know I can fall back on that.
0
ImaginxAuthor Commented:
When a user clicks the help button, the idea is that they can then click on other elements of the dom. Instead of target elements firing their normal events, I would display something similar to a tool tip - element specific. I'm not too concerned with the logic of the display if I know that there's a good solution to this event firing issue ...
0
leakim971PluritechnicianCommented:
$("button.myclass").click(function(evt) {
   if($("button.myclass.active").length>0) return false; // cancel because the user is working
   doSomething1();
   doSomething2();
   doSomething3();
   $.post("url.php", params, function() { // some ajax call here or somewhere else
       $("button.myclass.active").remove("active"); // the user have finish to work, unlock, autorise new processing
   });
});

Open in new window

0
GaryCommented:
So you are attaching a new event to the objects? - this is making it more difficult
0
ImaginxAuthor Commented:
Gary,
I did not plan to attach any new events to any elements. my explanation was high-level, and probably should have clarified that better.

Leakim,
not sure that i understand your logic.
where does .active get added to the element, within one of the functions ?
i noticed that you're passing the event into the function, is there a reason ?



Thanks
0
leakim971PluritechnicianCommented:
Yes I miss to add it AFTER the test :

$("button.myclass").click(function(evt) {
   if($("button.myclass.active").length>0) return false; // cancel because the user is working
   $(this).addClass("active");
   doSomething1();
   doSomething2();
   doSomething3();
   $.post("url.php", params, function() { // some ajax call here or somewhere else
       $("button.myclass.active").remove("active"); // the user have finish to work, unlock, autorise new processing
   });
});
0
leakim971PluritechnicianCommented:
i noticed that you're passing the event into the function, is there a reason ?

Not this time.
Check signature, jQuery always provide it : eventObject
http://api.jquery.com/click/
0
ImaginxAuthor Commented:
Which step described above prevents other elements from firing, if they were clicked on, while this was in progress ?
0
leakim971PluritechnicianCommented:
every button should share the same logic (same selector or not)

$("button.myclass").click(function(evt) {
   if($("button.myclass.active").length>0) return false;
0
GaryCommented:
Could you place all your jquery events in a function?
On page load call the function to bind the events initially
Click the help button and then you can turn off all events.
When they click a button to finish the help part you can just call the function again to rebind all the events.
I haven't been successful in doing this any other way...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ImaginxAuthor Commented:
Maybe I've misunderstood.

I'm understanding your example in the sense that it's applied to each button & renders each individual button 'inactive' while it's active through the process.

If my understanding is correct, I don't see that fulfilling the objective. I can make the help button inactive, but I need all buttons / dom elements [click events mainly] to be disabled while that process [original click on the help button] is still live.
0
ImaginxAuthor Commented:
That might be a good solution Gary. That makes sense. Lemme try it out.
0
leakim971PluritechnicianCommented:
If my understanding is correct, I don't see that fulfilling the objective. I can make the help button inactive, but I need all buttons / dom elements [click events mainly] to be disabled while that process [original click on the help button] is still live.

you rigth.
0
RobOwner (Aidellio)Commented:
Further to what @GaryC123 has said, by wrapping all your custom events for your elements in an Initialization function, would mean you can re-initialize later if you unbind the events.

I'm not sure how your page is laid out but you may need multiple initialization functions for different sections of the page.  The navigation, header, footer and body content for instance.  The body of the current page will have a different initialization to another page.  The navigation, header and footer though will more than likely have the same each page.

you would also have to remove any events specified in the tags as .off does not seem to remove them: http://jsbin.com/IsAxAX/1/edit
0
leakim971PluritechnicianCommented:
GaryC123 said :
Another option would be to overlay your page with a transparent div that blocks any interaction

What is the problem with this solution? It's very used with css popup/lightbox.
0
RobOwner (Aidellio)Commented:
I understood that there was still to be some interaction with the rest of the page.. you couldn't click but the tooltips would appear.  something of a "how to use my page" when you click the help button.
I pondered the transparent div idea as well but it wanted the tooltips to work you'd need to be able to interact with the elements directly.
0
GaryCommented:
You can disable all bindings with
$("*",document).off()
0
ImaginxAuthor Commented:
Thanks Experts  !!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.