onmount
Run something when a DOM element appears and when it exits
Last updated 4 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install onmount 
SYNC missed versions from official npm registry.

onmount

Run something when a DOM element appears and when it exits.
No dependencies. Legacy IE compatible. 1kb .min.gz.

Status

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

Current Tags

  • 1.3.0                                ...           latest (4 years ago)

7 Versions

  • 1.3.0                                ...           4 years ago
  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 11
Dependencies (0)
None
Dev Dependencies (11)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |