onmount
v1.3.0
Published
Run something when a DOM element appears and when it exits
Downloads
31,627
Maintainers
Readme
onmount
Run something when a DOM element appears and when it exits. No dependencies. Legacy IE compatible. 1kb .min.gz.
Overview
Detecting elements
Run something to initialize an element on its first appearance.
onmount = require('onmount')
onmount('.push-button', function () {
$(this).on('click', function () {
alert('working...')
})
})
Polling for changes
Call $.onmount()
everytime your code changes.
→
$('<button class="push-button">Do something</button>')
.appendTo('body')
$.onmount()
$(".push-button").click() //=> 'working...'
jQuery integration
jQuery is optional; use it to poll on popular events. →
$(document).on('ready show.bs closed.bs load page:change', function () {
$.onmount()
})
Cleanups
Supply a 2nd function to onmount() to execute something when the node is first detached. →
$.onmount('.push-button', function () {
/*...*/
}, function () {
alert('button was removed')
})
document.body.innerHTML = ''
$.onmount() //=> 'button was removed'
What for?
Onmount is a safe, reliable, idempotent, and testable way to attach JavaScript behaviors to DOM nodes. It's great for common websites that are not Single-Page Apps. Read more on its premise and motivation.
rsjs (Reasonable System for JavaScript Structure) is a great standard that onmount fits perfectly into.
Usage
Onmount is available via npm and Bower.
npm install onmount
bower install onmount
It can be used as a CommonJS module or on its own. It doesn't require jQuery, but if jQuery is found, it'll attach itself to it as $.onmount
.
onmount = require('onmount') // With CommonJS (ie, Browserify)
window.onmount // with no module loaders:
$.onmount // with jQuery
API
See: API
Browser compatibility
All modern browsers and IE8+. For legacy IE, use it with jQuery 1.x.
Examples
Examples are available in the source repo. See examples →
Thanks
onmount © 2015+, Rico Sta. Cruz. Released under the MIT License. Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz