Code has been added to clipboard!

Before on Method: Learn How jQuery .bind() Was Used

Reading time 1 min
Published Jan 11, 2018
Updated Sep 27, 2019

jQuery bind: Main Tips

  • The jQuery .bind() method has been deprecated since version 3.0 of jQuery. Use .on() method instead.
  • .bind() added event handlers to the selected elements.

How .bind() Worked

The jQuery .bind() method was used to attach event handlers to elements.

Example
$("span").bind("click", () => {
   $("span").text("Clicked!");
});

jQuery .bind() followed this syntax:

$("selector").bind(event, data, function);

There were three parameters relevant to jQuery .bind():

  • event defined a standard JavaScript event or a custom jQuery.event object.
  • data represented the additional data to be passed to the handler function.
  • function specified the handler function to attach and run when the specified event was triggered.

Note: .bind() added handlers directly to selected elements. Therefore, the elements had to be present when the function occured. For more flexibility, .on() was used.

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