jQuery plugin: one_time_action¶ ↑

About¶ ↑

JQuery plugin that can be used on submits, buttons and links: Makes them work only once. They can be reactivated after a given time or by a specific function call.

Demo at www.headjump.de/article/jquery-plugin-one_time_action

For what to use?¶ ↑

• Everything that shall work only once, e.g.:

  • Submit-buttons that shall be deactivated after click (so you won’t get multiple submits from a single form)

• Everything that shall be used only every some seconds (means: reactivation after timeout), e.g.:

  • Async refresh buttons for, let’s say guestbooks

  • Async send buttons for, let’s say guestbooks

• Everything that shall be disabled after usage and reactivated later on (e.g. after an ajax callback or another event) - with a simple function call

Usage¶ ↑

$(".my-selector").one_time_action();

Removes functionality on click

$(".my-selector").one_time_action({add_class: "disabled"});

Additionally adds given class to element when clicked.

$(".my-selector").one_time_action({reactivate: 5000});

Element will be reactivated after given milliseconds.

$(".my-selector").one_time_action("reactivate");

Reactivates element immediately.

How it works¶ ↑

The target element is cloned, disabled, and shown instead of the original. All that happens when the user clicks at the element for the first time (not earlier).

The cloned element is insert after the original one to the DOM. So if you insert stuff into the DOM directly after the original element, you’re messing with the order.

A reference to the clone is stored with $.data at the original element with the key “one_time_action_clone” (that shouldn’t collide with you own keys).

There are several reasons for creating a clone instead of disabling the original element:

• At first, some browsers don’t proceed submitting a form if you disable a submit button on click. So if one just hides the button and showes a disabled clone instead, everything works just fine.

• Disabling the element shall not only kill form submits and url changes from link clicking, but prevend bound click functions. That’s done the easiest by cloning without cloning the bindings.

In order to not only disable the click bindings done with jQuery but also the ones inside the HTML tag (e.g. onclick=“do_some_crazy-stuff();”), the disabled element clone empties “onclick”, “onmousedown” and “onmouseup”. If you have other functions in your attributes, they’ll remain untouched (e.g. “onmousemove”, …)

Feel free to contact me for feedback or suggestions.