I have an array of anchors, I am binding an event to each one:
$j('.opts a').live("click", function(e){}) ;
I would like to stop the other anchors from being clickable until this click event has finished.
$j('.opts a').live("click", function(e){
$j('.opts a').unbind('click');
//do something
$j('.opts a').bind('click');
});
This is just an example of one thing i've tried, but even the unbind doesn't work.
You can't really keep a link from being clickable. You can only unbind whatever JS event you've registered. You'll want to make sure to call preventDefault(), otherwise a link will just follow its href.
Try something like this.
var isDoingSomething = false;
$j('.opts a').on('click', function (e) {
e.preventDefault();
if (!isDoingSomething) {
isDoingSomething = true;
// do something
isDoingSomething = false;
}
});
Hope this helps.
.on - but probably need to bind the .on to the direct parent of the .opts for best performance. (whatever that parent is)I don't think jQuery is the correct tool here. Your problem is that the events queue while your JavaScript does something.
So what you really need is something like "swallow all queued click events when I return."
I suggest to move the rebinding of the click handlers into a new function and call that in a timer. That allows the browser to process the queued events.
And maybe unbinding is the wrong approach as well. If you're always using the same handler, turn it into an object with a skip property:
skip: false,
run: function( e ) {
if (this.skip) return;
this.skip = true;
... do something ...
var self = this;
setTimeout( function() { self.skip = false; }, 50 );
}
[EDIT] Another alternative: If all the links are in one HTML element (like a parent div or something), you can install a click handler for that element which does nothing. That would also swallow the click events. You will still need the timeout handler to make sure the events are processed after you return from your function.
Bad ->
$j('.opts a').live("click", function(e){
$j('.opts a').unbind('click');
//do something
$j('.opts a').bind('click');
});
Good ->
$j(document).on("click", '.opts a', function(e){
$j('.opts a').off('click');
//do something
$j('.opts a').on('click', //a function such as 'myClickFunction' referencing what you want to occur.);
});
