@actualwave/jquery-events-to-dom

Listens for jQuery events to re-dispatch them from DOM element as CustomEvent. To redispatch Bootstrap 4 modal events from modal DOM element

Usage no npm install needed!

<script type="module">
  import actualwaveJqueryEventsToDom from 'https://cdn.skypack.dev/@actualwave/jquery-events-to-dom';
</script>

README

jQuery events to DOM

Listens for jQuery events to re-dispatch them from DOM element as CustomEvent. To redispatch Bootstrap 4 modal events from modal DOM element

import translateJQueryEventsToDOM from '@actualwave/jquery-events-to-dom';

translateJQueryEventsToDOM()(
  'show.bs.modal',
  'shown.bs.modal',
  'hide.bs.modal',
  'hidden.bs.modal'
);

This will re-dispatch bootstrap modal show, shown, hide and hidden events from target DOM element.

const modalElement = document.getElementById('my-bootstrap-modal');

modalElement.addEventListener('hidden', (event) => {
  console.log('Modal is hidden now.');
});

translateJQueryEventsToDOM accepts two optional arguments

  • target - DOM element to listen for jQuery events, by default document.
  • jquery - jQuery instance, by default window.$.