Avatar of Imaginx
Imaginx asked on

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
jQueryJavaScriptHTML

Avatar of undefined
Last Comment
Imaginx

8/22/2022 - Mon
leakim971

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
Gary

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
ASKER
Imaginx

Rebinding is where I saw my obstacles.

.On is predominately used through the site -> .off() ?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Gary

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
ASKER
Imaginx

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.
ASKER
Imaginx

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 ...
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

$("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

Gary

So you are attaching a new event to the objects? - this is making it more difficult
ASKER
Imaginx

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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
leakim971

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

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/
ASKER
Imaginx

Which step described above prevents other elements from firing, if they were clicked on, while this was in progress ?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

every button should share the same logic (same selector or not)

$("button.myclass").click(function(evt) {
   if($("button.myclass.active").length>0) return false;
ASKER CERTIFIED SOLUTION
Gary

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Imaginx

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.
ASKER
Imaginx

That might be a good solution Gary. That makes sense. Lemme try it out.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
leakim971

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.
Rob

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
leakim971

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rob

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.
Gary

You can disable all bindings with
$("*",document).off()
ASKER
Imaginx

Thanks Experts  !!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy