How to Avoid Double Clicking With jQuery

Introduction

• There has been always troubling issue regarding user interaction,when the user Double Clicks the DOM elements.Such as buttons,links etc. 
• Fortunately, jQuery has an awesome solution for this
• That is .one() method

What does .one Method Do ?

• It attaches a handler to an event for the elements and that handler is executed at most once per element

Theory

.one( events [, selector ] [, data ], handler(eventObject) )

events

Type: String

• One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin"

selector

Type: String

• A selector string to filter the descendants of the selected elements that trigger the event
• If the selector is null or omitted, the event is always triggered when it reaches the selected element

data

Type: Anything

• Data to be passed to the handler in event.data when an event is triggered

handler(eventObject)

Type: Function()

• A function to execute when the event is triggered
• The value false is also allowed as a shorthand for a function that simply does return false

Example

$("#saveBttn").one("click", function () {

    alert("This will be displayed only once.");

});

OR

$("body").one("click", "#saveBttn", function () {

    alert("This displays if #saveBttn is the first thing clicked in the body.");

});

Key points of the above code :

• After the code is executed, a click on the element with Id saveBttn will display the alert
• Subsequent clicks will do nothing
• This is equivalent to ==>

$("#saveBttn").on("click", function (event) {

    alert("This will be displayed only once.");

    $(this).off(event);

});

In other words

• explicitly calling .off() from within a regularly-bound handler has exactly the same effect

Do You Need to Know More ?

jQuery .one()

Conclusion

• Above mentioned method works since jQuery Version 1.7
• So if your elements click event fires more than once then this may be the solution
• Enjoy this awesome method and let me know If you have any issues 

I hope this helps to You.Comments and feedback greatly appreciated.

If you feel it was a good article,Give me a +1.Thank You.

You Might Also Like

• How to Improve jQuery Selector Performance ?

CodeProject

Related Posts by Categories