View on GitHub

attrchange beta

onattrchange listener

a jQuery plugin

Download this project as a .zip file Download this project as a tar.gz file

Overview

attrchange is a simple jQuery function to bind a listener function on attribute change of an element.

The handler function is triggered when any attribute such as id, class, style, e.t.c is added or updated or modified to the element.

This original idea is from an a question posted on stack overflow

Usage

To use the function, include jQuery library and attrchange plugin.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript"
        src="https://raw.github.com/meetselva/attrchange/master/attrchange.js"></script>

Bind attrchange handler function to selected elements

$(selector).attrchange({
	trackValues: true, /* Default to false, if set to true the event object is 
				updated with old and new value.*/
	callback: function (event) { 
	    //event    	          - event object
	    //event.attributeName - Name of the attribute modified
	    //event.oldValue      - Previous value of the modified attribute
	    //event.newValue      - New value of the modified attribute
	    //Triggered when the selected elements attribute is added/updated/removed
	}        
});

Examples:

Example 1: An interactive demo to show when the handler is triggered and the additional information available inside the handler. Try using the and in the left block to move the div block +/- 10px to left/right which triggers the attribute change handler.

Show code

<div id="blocks">
     <div title="b1" class="block" >b1</div>
</div>

$('#blocks .block').attrchange(
	trackValues: true,
	callback: function(e) {
		$('#example1 .logger').prepend('<p><b>' + e.attributeName + 
			'</b> changed for <b>' + this.title + 
			'</b> from <b>' + e.oldValue + 
			'</b> to <b>' + e.newValue + '</b></p>');
	}
});

b1

Note:Updated log is highligted in blue

Example 2: An interactive demo to test different conditions when the handler function will be called. You can add/update/remove attributes on the demo div elements. Click on the demo div boxes to pop the Attribute Changer dialog, using which you can add/remove/update the attributes of the selected div box.

Upon each update the handler function will be triggered and In this example the handler function simply prints the attribute name and the div id in the logger.

Show code

HTML:

<div class="demo-content">
    <div title="click to add/update/remove attributes" class="demo" id="demo1">
       demo 1 div
    </div>
    <div title="click to add/update/remove attributes" class="demo" id="demo2">
       demo 2 div
    </div>
    <div title="click to add/update/remove attributes" class="demo" id="demo3">
       demo 3 div
    </div>
    <div title="click to add/update/remove attributes" class="demo" id="demo4">
       demo 4 div
    </div>
    <div title="click to add/update/remove attributes" class="demo" id="demo5">
       demo 5 div
    </div>
</div>

JS:

$('.demo-content').attrchange(function(e, attrName) {    
    $logger2.prepend('<p>- attribute <b>' + attrName + '</b> changed for ' + 
       $(this).html() + '</p>');
});

demo 1 div

demo 2 div

demo 3 div

demo 4 div

demo 5 div

Note: logger to show the execution of the handler function

Attribute Changer

Listed below are the attributes of the div:

add new attribute

Add/Modify Attribute

Attr Name

Attr Value

Download

Download as a .zip file

Download as a tar.gz file

Browser Compatibility

This plugin has been successfully tested in the following browsers:

IE6+
FF
Chrome

Known Issues

attrchange plugin uses different API to support cross browser/backward compatibility. The response has been normalized to match with the response from MutationObserver however the return values from the API's are sometimes different especially on style attribute.

On changing the style attribute, Older standard such as DOMAttrModified/onpropertychange returns the specific css property that was updated (ex: return for updating css top would return -> top: 60px) but the MutationObserver returns the entire style attribute value and not the property that was changed (something like $(this).attr('style')).