Registry / web-framework / jquery-events-to-dom-events

jquery-events-to-dom-events

library1.1.0jsnpmunverified

A tiny zero-dependency library (30 LOC) that bridges jQuery custom events to DOM CustomEvents, enabling vanilla JS listeners for jQuery-triggered events. Version 1.1.0, maintained but low release cadence. Key differentiator: works without refactoring existing jQuery code, designed for StimulusJS and Turbolinks, bidirectional (also forwards DOM events to jQuery). Requires jQuery loaded globally as window.$.

web-framework

npm install jquery-events-to-dom-events

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JQUERY-EVENTS-TO-D

jquery-events-to-dom-events

web-frameworkjavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

delegate

✓ import { delegate } from 'jquery-events-to-dom-events'

✗ const delegate = require('jquery-events-to-dom-events').delegate

ESM-only; using require might not work depending on bundler configuration.

undel

✓ import { undel } from 'jquery-events-to-dom-events'

✗ import { undelegate } from 'jquery-events-to-dom-events'

The library exports 'undel', not 'undelegate'.

default

✓ import * as jqueryEventsToDomEvents from 'jquery-events-to-dom-events'

✗ import jqueryEventsToDomEvents from 'jquery-events-to-dom-events'

No default export; use namespace import.

Shows how to delegate a jQuery event to a DOM CustomEvent and listen for it.

import { delegate, undel } from 'jquery-events-to-dom-events'; // Set up event delegation for a jQuery custom event delegate('my.custom.event'); // Listen for the DOM version (prefixed with $) document.addEventListener('$my.custom.event', (e) => { console.log('Received:', e.detail); }); // Later, to stop delegation: // undel('my.custom.event'); // If jQuery is not already global, ensure it is: // window.$ = window.jQuery = require('jquery');

Debug

Known issues

gotchaRequires jQuery to be available globally as window.$. If not set, library fails silently.

fix

Ensure jQuery is loaded and assigned to window.$ before importing the library.

affects: >=0.0.0

gotchaDOM event names are prefixed with a dollar sign ($). Forgetting the prefix causes the listener to never fire.

fix

Always prepend '$' to the jQuery event name when using addEventListener.

affects: >=0.0.0

gotchaOnly works with custom jQuery events triggered via $.trigger, not native browser events (e.g., 'click').

fix

Use only for jQuery custom events (e.g., 'hidden.bs.modal'). For native events, attach listeners directly.

affects: >=0.0.0

gotchaLibrary does not clean up event listeners unless undel is called. Delegation persists across page navigations (e.g., Turbolinks).

fix

Call undel() when the component disconnects (e.g., in Stimulus disconnect or useEffect cleanup).

affects: >=0.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of null (reading 'split')

jQuery is not loaded or window.$ is undefined when delegate is called.

fix

Ensure jQuery is loaded and available as window.$ before using this library.

document.addEventListener('my.custom.event', handler) not firing

DOM event names must be prefixed with '$'.

fix

Use document.addEventListener('$my.custom.event', handler) instead.

Cannot find module 'jquery-events-to-dom-events' when using require()

Library is ESM-only, not compatible with CommonJS require().

fix

Use import syntax: import { delegate } from 'jquery-events-to-dom-events'

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/leastbad/jquery-events-to-dom-events ↗

packagehttps://www.npmjs.com/package/jquery-events-to-dom-events ↗

homepagehttps://leastbad.com/ ↗