Have something happen on a click event, but only once! Unbind the click handler after the element has been clicked once.
$('#my-selector').bind('click', function() { $(this).unbind('click'); alert('Clicked and unbound!'); });Also see Ben’s comment below for jQuery’s .one() function which is essentially the same thing.
Doesn’t this have the same effect as:
$(‘#my-selector’).one(‘click’, function() {
alert(‘This can only happen once’);
});
?
Indeed it is, thanks for posting.
The bind formula does allow you to re-bind the click event later if needed.
No, both are different.
when you use a ‘one’, the handler is executed at most once per element per event type.
That mean if selector affects multiple elements. This will allow only one click per element.
But when you explicitly unbind a event, event will be unbinded from all element after being triggered once.
I need to re-bind a click event after some animate effects have been applied. What I want to happen is allow the user to click the button only once until the animate sequence has completed. In other words click (only allow once until event finishes), unbind, animate, re-bind click. I have had some trouble with this, any suggestions?
Instead of binding and unbinding the event, maybe instead just check if the element is animated before doing what you were going to do.
You can test if something is currently being animated with :animated as part of the selector.
Sweet! thanks guys.
did not know the one() trick : -)
art
Hey,
one() is a nice feature, but not always is a working solution. When we have a function, and inside we bind click event, to call that function recursively, we need to unbind the callback before we can call the function – if not, we get infinite loop.
function f()
{
$('foo').click(function(){
$(this).unbind('click');
f();
});
// something else
}
We cannot do that with one() function. But thanks for the tips!
Good trick, but be carreful with the unbind(‘click’) wich will unbind all click events. Use namespace for this is safer. To be sure that only the good click event is unbinded :
$('#my-selector').bind('click.myEvent', function() {
$(this).unbind('click.myEvent');
alert('Clicked and unbound my event!');
});
is possible to remove unbind on blur ?
As others have said .one() is the best solution, but if you need to bind / unbind, you should be very careful when using $(‘#selector’).unbind(‘event’), as all listeners for the ‘event’ will be unbound.
This will ensure that you are only unbinding the one listener.
var myEventFunc = function (){ //...do something $('#selector').unbind('event',myEventFunc); }; $('#selector').bind('event',myEventFunc);plz help when i click once on submit button my submitHandler() call
when i click again on submit button i will call 2 times …
this is my code
Name*
Email address*
Phone Number*
Company
Designation
Subject
Message
Submit
function submitHandler(){