Saturday, July 27, 2013

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 element's 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

4 comments:

Thanks for your Feedback.