Skip to content
It is a useful jquery plugin that uses MutationObserver
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src/js
.gitignore
.gitignore.swp
LICENSE
README.md
_config.yml
package-lock.json
package.json
webpack.config.js

README.md

jquery-mutation-observe

It is a useful jquery plugin based on MutationObserver.

When you apply a plug-in to an element, you can detect changes in the element itself or its descendant elements in real time. Changes it can detect include changing attribute values and adding and deleting nodes.

usage

include jquery and this plugin

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery-mutation-observe.js"></script>

apply plugin to an element

monitoring changes of attributes

$('.element')
    // When monitoring only its own class attribute
    .observeAttribute({
        'attributes': 'class',
        'callback': function(data){
            console.log('attribute:class has been changed');
        }
    });

monitoring adding and deleting nodes

$('.element')
    .observeNode({
        'selector': '> .child',
        'callback': function(data) {
            var tag = escapeHtml($(data.node).prop('outerHTML'));
            if (data.type=='add') {
                console.log('node has been added');
            } else if (data.type=='remove') {
                console.log('node has been removed');
            }
        }
    });

options

.observeAttribute

options type description example
attributes string/Array Attribute list to be monitored. If not specified, all attributes are targeted. "class"
selector string selector character string specifying the element to be monitored. (relative designation from the top element) If not specify, only the top element is targeted. > .child
callback function Function to be called when a change is detected.

.observeNode

options type description example
selector string Elements matching the selector are detected when adding or deleting. (relative designation from the top element) If not specify, all elements under the top element are targeted. > .child
callback function Function to be called when a change is detected.
You can’t perform that action at this time.