Code has been added to clipboard!

Learning to Make jQuery Trigger Specified Events in Minutes

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

jQuery trigger: Main Tips

  • The jQuery .trigger() method runs all event handlers assigned to elements for the provided event type.
  • .on() and its shortcut methods run when events occur naturally. The .trigger() runs handlers manually in their regular sequence.

Usage of .trigger()

The jQuery .trigger() method triggers the specified event handler on matched elements.

Example
$("input").select(() => {
    $("input").after("Hey");
});
$("button").click(() => {
    $("input").trigger("select");
});

Unlike the .triggerHandler() method, which only triggers the handler, .trigger() in jQuery includes both the default event behavior and the handler functions.

The syntax for this method:

$("selector").trigger(eventType, [parameter1], [parameter2], ..., [parameterN]);

The jQuery .trigger() method takes two parameters:

  • eventType specifies a standard JavaScript event or a custom jQuery.event object.
  • parameter defines the parameters you may pass to the event handler function.
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