You could add some custom event to see effect change of the content of the element:
You can see this example here at jsFiddle: Html element content change event
You can see this example here at jsFiddle: Html element content change event
Html content
<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>
jQuery content
// 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() { $("#console").prepend('<div>html-change-pre triggered: '+counter+'</div>'); }); jQuery('#hello').bind('html-change-post', function() { $("#console").prepend('<div>html-change-post triggered: '+counter+'</div>'); }); var counter = 0; $("#html").click(function() { $("div#hello").html("<div>html: "+counter+"</div>"); counter++; }); $("#prepend").click(function() { $("div#hello").prepend("<div>prepend: "+counter+"</div>"); counter++; }); $("#append").click(function() { $("div#hello").append("<div>append: "+counter+"</div>"); counter++; }); });
No comments:
Post a Comment