Code has been added to clipboard!

jQuery .one() Method: What It Does and How to Use It Correctly

Reading time 1 min
Published Jan 10, 2018
Updated Oct 10, 2019

jQuery one: Main Tips

  • The jQuery .one() method adds event handlers to the selected element to run once.
  • The .one() in jQuery is similar to .on(). However, the latter method does not have set event handlers and event types after first invocation.
  • The jQuery .one() method streamlines how functions work.

Using .one() in Your Code

The jQuery .one() method adds event handlers. However, these handlers will only run functions in jQuery once for each element they are attached to.

Example
$("button").one("click", () => {
    $(p).animate({fontSize: "+=6px"});
});

This is the syntax you need to use for the .one() jQuery method to run functions of jQuery once:

$("selector").one(event,data,handler);

.one() jQuery method takes three arguments:

  • event - an event type, specifying handlers to be be added. Accepts multiple values separated by spaces.
  • data - data passed to the jQuery event handler via the event.data when the event is triggered.
  • handler - the handler function executed when the event is triggered.
Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX