Run something when a DOM element appears and when it exits
npm install onmountRun something when a DOM element appears and when it exits.
No dependencies. Legacy IE compatible. 1kb .min.gz.
Run something to initialize an element on its first appearance.
``js
onmount = require('onmount')
onmount('.push-button', function() {
$(this).on('click', function() {
alert('working...')
})
})
`
> _See: Premise_
:tada: If you're looking to use Onmount to mount React components, check out [Remount] instead.
Call $.onmount() everytime your code changes.
`js
$('').appendTo('body')
$.onmount()
$('.push-button').click() //=> 'working...'
`
> _See: Idempotency_
jQuery is optional; use it to poll on popular events.
`js`
$(document).on('ready show.bs closed.bs load page:change', function() {
$.onmount()
})
> _See: API_
Supply a 2nd function to _onmount()_ to execute something when the node is first detached.
`js
$.onmount(
'.push-button',
function() {
/.../
},
function() {
alert('button was removed')
}
)
document.body.innerHTML = ''
$.onmount() //=> 'button was removed'
`
> _See: Cleanups_
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][rsjs] (Reasonable System for JavaScript Structure) is a great standard that onmount fits perfectly into.
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.
`js``
onmount = require('onmount') // With CommonJS (ie, Browserify)
window.onmount // with no module loaders:
$.onmount // with jQuery
[bootstrap events]: http://getbootstrap.com/javascript/
[turbolinks load]: https://github.com/rails/turbolinks#events
[idempotent]: https://en.wiktionary.org/wiki/idempotent
[browserify]: http://browserify.org/
> _See: API_
All modern browsers and IE8+. For legacy IE, use it with jQuery 1.x.
Examples are available in the source repo. See examples →
onmount © 2015+, Rico Sta. Cruz. Released under the [MIT] License.
Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).
> ricostacruz.com ·
> GitHub @rstacruz ·
> Twitter @rstacruz
[mit]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/onmount/contributors
[rsjs]: https://github.com/rstacruz/rsjs
[remount]: https://github.com/rstacruz/remount