Question

I’ve got following solution to prevent of multiple clicks (respect only the first one and ignore the rest):

preventMultiClick = function() {
    $(this).unbind("click");
    $(this).bind("click", function() {
        return false;
    });
};
preventMultiSubmit = function() {
    $(this).unbind("submit");
    $(this).bind("submit", function() {
        return false;
    });
};
$("a").one("click", preventMultiClick);
$("#user").one("submit", preventMultiSubmit);

That solution for me is not elegant I think should be. So I tried upgrade it to following one:

preventMultiClick = function(event) {
    $(this).unbind(event);
    $(this).bind(event, function() {
        return false;
    });
};
$("a").one("click", preventMultiClick("click"));
$("#user").one("submit", preventMultiClick("submit"));

and that solution doesn’t work. Could somebody explain why or tell me how the function respecting event given as function argument should be written?

Answer 1

The issue is you are calling the function when you are binding the handler, event object is passed to your handler, also event is an object, you should use it’s type property.

var preventMultiClick = function(event) {
    $(this).unbind(event.type);
    $(this).bind(event.type, function() {
        return false;
    });
};

$("a").one("click", preventMultiClick);
$("#user").one("submit", preventMultiClick);