Nitrate Processed Mincemeat

    onmount

    1.3.0 • Public • Published

    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

    Install

    npm i onmount

    DownloadsWeekly Downloads

    2,173

    Version

    1.3.0

    License

    MIT

    Last publish

    Collaborators

    • rstacruz