Giter Club home page Giter Club logo

jquery.initialize's Introduction

Note from author (pie6k). I've created this lib few years ago and it was nice back then. Now you should propably not be using jQuery for things like that and go with React or something similar. Thank you.

jQuery.initialize

Version: 1.3.0, Last updated: 2018-06-20

jQuery.initialize plugin is created to help maintain dynamically created elements on the page.

Synopsis

jQuery.initialize will iterate over each element that matches the selector and apply the callback function. It will then listen for any changes to the Document Object Model (DOM) and apply the callback function to any new elements inserted into to the document that match the original selector.

$.initialize([selector], [callback]);

This allows developers to define an initialization callback that is applied whenever a new element matching the selector is inserted into the DOM. It works for elements loaded via AJAX also.

Simple demo - click here

Example of use

$.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

But now if new element matching .some-element selector will appear on page, it will be instantly initialized. The way new item is added is not important, you dont need to care about any callbacks etc.

$("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!

Unobserving

To cease observation of the document, you may disconnect the observer by calling disconnect() on the returned MutationObserver instance which stops it from receiving further notifications until and unless observe() is called again. . E.g.,

var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();

Options

target

By default, the entire docment is observed for changes. This may result in poor performance. A specific node in the DOM can be observed by specifying a target:

$.initialize(".some-element", function() {
    $(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });

Otherwise, target will default to document.documentElement.

observer

A custom MutationObserverInit may be provided. If not provided, it will default to internal configuration.

Browser Compatibility

Plugin is based on MutationObserver. It will works on IE9+ (read note below) and every modern browser.

Note: To make it work on IE9 and IE10 you'll need to add MutationObserver polyfill - like ones here: https://github.com/webcomponents/webcomponentsjs


Performance test (thanks to @dbezborodovrp and @liuhongbo)

Todo

  • make it bower and npm compatible, add advanced performance test.

Contributors

  • Adam Pietrasiak
  • Damien Bezborodov
  • Michael Hulse

jquery.initialize's People

Contributors

pie6k avatar bezborodow avatar nesterovicheugene avatar ninos avatar dannyvanholten avatar mhulse avatar jonesnc avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.