Handling jQuery UI Plugin Events - J Query

You need to react to, or be notified of, an event that occurs on a jQuery UI plugin. This could be a dialog opening, an accordion panel closing, or a tab being selected.
In this recipe, we’re going to handle a draggable being dropped onto a droppable, which triggers the drop event on the droppable element.

Solution 1: Pass a Callback Function to the Event Name Option

On init, or later using the option method, you can declare a callback function to be called when that event occurs:

Note that this solution allows for only one function to be called at each event trigger.You can call multiple handling functions by using a proxy method or by using the bind solution, shown next.

Solution 2: Bind to the Custom Event Using the Event Type

Use the jQuery .bind() method, and bind to the type of the event:

This binding can be done on the plugin element itself, or some container, taking advantage of custom event bubbling and delegation.


Every jQuery UI event receives two arguments, event and ui. The event argument is similar to the event argument passed to all browser events, such as click and keypress. The difference is that this is a custom event object. As with browser events,the type can be found in event.type.
Many jQuery UI plugin events have corresponding browser events that will typically trigger them. For example, the draggable sequence, dragstart, drag, dragstop, is most likely triggered by the browser events mousedown, mousemove, and mouseup. If the custom event was triggered by a browser event, that browser event will be in the event.originalEvent property. This can be really useful if you need to determine whether something was done via the keyboard, the mouse, or programmatically. Or it can be helpful if you need to find out whether a modifier key was held while the mouse was clicked or moved.
The ui argument is a hash that contains any values that are particularly applicable to that event at that time, as well as ones that couldn’t be had by calling the option or some other method on the plugin. For example, when a droppable gets a draggable dropped on it, that draggable element is passed to the drop event in ui.draggable. The contents of this ui hash are unique to each plugin event.
Note that the event name is most often different from the event type. For example, both Draggable and Slider have a start event. This is the event name. The types of the same are drag start and slide start. Since each plugin has its own option namespace, each can have the same option name, simply, start:

But since events are bound and triggered in the same namespace, a prefix is required to make the event types unique:

This prefix is most commonly the name of the plugin, yielding event types such as dialogfocus, tabsadd, and progressbarchange. In some cases, a custom verb prefix is used instead, if it’s a better fit. So, you use dragstart instead of draggablestart, and you use slidestart instead of sliderstart.
If the event type prefix happens to match the event name exactly, it is dropped to avoid a doubling up like dragdrag or slideslide. In these cases, the event type will match the event name, like drag and slide.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics