Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dispatch jQuery events as regular DOM events
# ~ Dispatch jQuery events as regular DOM events ~
#
# Delegated events are given a new name in the format `jquery:<original event name>`.
# If you delegate `ajax:send` you will be able to listen for `jquery:ajax:send`
# on native event listeners such as Stimulus actions and `EventTarget.addEventListener`.
#
# Notes:
# * The first parameter must be called "event".
# * The parameters can be accessed as members on the `event.detail` object.
#
# Example:
# delegate 'ajax:send', parameters: ['event', 'xhr']
# document.addEventListener 'jquery:ajax:send', (event) -> console.log(event.detail)
#
delegate = (eventName, {parameters}) ->
handler = (args...) ->
data = {}
data[name] = args[index] for name, index in parameters
delegatedEvent = new CustomEvent("jquery:#{eventName}",
bubbles: true,
cancelable: true,
detail: data)
data.event.target.dispatchEvent(delegatedEvent)
$(document).on(eventName, handler)
@kaspermeyer

This comment has been minimized.

Copy link
Owner Author

commented Dec 13, 2018

# jQuery UJS
#
# Source: https://github.com/rails/jquery-ujs/wiki/ajax
#
delegate 'ajax:before',           parameters: ['event']
delegate 'ajax:beforeSend',       parameters: ['event', 'xhr', 'settings']
delegate 'ajax:send',             parameters: ['event', 'xhr']
delegate 'ajax:success',          parameters: ['event', 'data', 'status', 'xhr']
delegate 'ajax:error',            parameters: ['event', 'xhr', 'status', 'error']
delegate 'ajax:complete',         parameters: ['event', 'xhr', 'status']
delegate 'ajax:aborted:required', parameters: ['event', 'elements']
delegate 'ajax:aborted:file',     parameters: ['event', 'elements']
@kaspermeyer

This comment has been minimized.

Copy link
Owner Author

commented Dec 13, 2018

# Select 2 (v4.0)
#
# Source: https://select2.org/programmatic-control/events
#
delegate 'select2:closing',     parameters: ['event']
delegate 'select2:close',       parameters: ['event']
delegate 'select2:opening',     parameters: ['event']
delegate 'select2:open',        parameters: ['event']
delegate 'select2:selecting',   parameters: ['event']
delegate 'select2:select',      parameters: ['event']
delegate 'select2:unselecting', parameters: ['event']
delegate 'select2:unselect',    parameters: ['event']
@kaspermeyer

This comment has been minimized.

Copy link
Owner Author

commented Dec 13, 2018

# Bootstrap (v4.1)
#
# Source: https://getbootstrap.com/docs/4.1/getting-started/javascript/#events
#
# ~ alert
delegate 'close.bs.alert',        parameters: ['event']
delegate 'closed.bs.alert',       parameters: ['event']
# ~ carousel
delegate 'slide.bs.carousel',     parameters: ['event']
delegate 'slid.bs.carousel',      parameters: ['event']
# ~ collapse
delegate 'show.bs.collapse',      parameters: ['event']
delegate 'shown.bs.collapse',     parameters: ['event']
delegate 'hide.bs.collapse',      parameters: ['event']
delegate 'hidden.bs.collapse',    parameters: ['event']
# ~ dropdown
delegate 'show.bs.dropdown',      parameters: ['event']
delegate 'shown.bs.dropdown',     parameters: ['event']
delegate 'hide.bs.dropdown',      parameters: ['event']
delegate 'hidden.bs.dropdown',    parameters: ['event']
# ~ tab
delegate 'show.bs.tab',           parameters: ['event']
delegate 'shown.bs.tab',          parameters: ['event']
delegate 'hide.bs.tab',           parameters: ['event']
delegate 'hidden.bs.tab',         parameters: ['event']
# ~ modal
delegate 'show.bs.modal',         parameters: ['event']
delegate 'shown.bs.modal',        parameters: ['event']
delegate 'hide.bs.modal',         parameters: ['event']
delegate 'hidden.bs.modal',       parameters: ['event']
# ~ popover
delegate 'show.bs.popover',       parameters: ['event']
delegate 'shown.bs.popover',      parameters: ['event']
delegate 'hide.bs.popover',       parameters: ['event']
delegate 'hidden.bs.popover',     parameters: ['event']
delegate 'inserted.bs.popover',   parameters: ['event']
# ~ scrollspy
delegate 'activate.bs.scrollspy', parameters: ['event']
# ~ tooltip
delegate 'show.bs.tooltip',       parameters: ['event']
delegate 'shown.bs.tooltip',      parameters: ['event']
delegate 'hide.bs.tooltip',       parameters: ['event']
delegate 'hidden.bs.tooltip',     parameters: ['event']
delegate 'inserted.bs.tooltip',   parameters: ['event']
@asecondwill

This comment has been minimized.

Copy link

commented Mar 13, 2019

Works for Zurb Foundation too.

delegate 'moved.zf.slider', parameters: ['event']

And then
<div class="slider visits-slider" data-action="jquery:moved.zf.slider->provision#update">

@asecondwill

This comment has been minimized.

Copy link

commented Apr 2, 2019

This actually gives an errorJust noticed this doesn't work for ie11

Object doesn't support this action
Line 16 of the JS(converted from coffee)

delegatedEvent = new CustomEvent("jquery:" + eventName, {

original coffee:
delegatedEvent = new CustomEvent("jquery:#{eventName}",

@asecondwill

This comment has been minimized.

Copy link

commented Apr 2, 2019

CustomEvent isn't supported in ie11, but there is a polyfil which worked great for me:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent


(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.