Html element content change event

Html element content change event

by Pritom K Mondal

HTML

<table>
    <tr>
        <td valign="top">
            <button id="html">Click to see change 'html'.</button><br/>
            <button id="append">Click to see change 'append'.</button><br/>
            <button id="prepend">Click to see change 'prepend'.</button><br/>
            <div id="hello">This is text!</div>
        </td>
        <td valign="top">
            <div id="console"></div>
        </td>
    </tr>
</table>

JavaScript

// Redefines $.fn.html(), $.fn.append(), $.fn.prepend() to add custom events that are triggered before and after a DOM element's innerHtml is changed
// html-change-pre is triggered before the innerHtml is changed
// html-change-post is triggered after the innerHtml is changed

(function($) {
    var eventName = 'html-change';
    // Save a reference to the original html, append and prepend function
    $.fn.htmlx = $.fn.html;
    $.fn.appendx = $.fn.append;
    $.fn.prependx = $.fn.prepend;
    // Let's redefine the html, append and prepend function to include a custom event
    $.fn.html = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.htmlx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
    $.fn.append = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.appendx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
    $.fn.prepend = function() {
        var currentHtml = this.htmlx();
        if(arguments.length) {
            this.trigger(eventName + '-pre', jQuery.merge([currentHtml], arguments));
            jQuery.fn.prependx.apply(this, arguments);
            this.trigger(eventName + '-post', jQuery.merge([currentHtml], arguments));
            return this;
        } else {
            return currentHtml;
        }
    }
})(jQuery);
        
// Test
jQuery(document).ready(function() {

    jQuery('#hello').bind('html-change-pre', function() {
       ...