OnContentChange custom event document

Question

Here's jsFiddle for sample testing

I am currently writing a jquery snippet to handle any change to the html content in the DOM called by any jquery domManip function (extension of some functions). Not sure if this is the best way to do this, so any advice would be appreciated. This snippet works as expected if attached to a document. However, if I try to bind it to a specific element, I run into a problem that works like .remove () . This may be due to the fact that the user event does not use normal propagation behavior, but I'm really not sure.

This is a working sample, I bind the contentChange event to the document, the cross browser works, since I can test it: {Firefox, IE9, Chrome and Safari under Win7}

; (function ($) { $.fn.contentChange = function (types, data, fn) { return this.on('contentChange', types, null, data, fn); }; var oDomManip = $.fn.domManip, oHtml = $.fn.html, oEmpty = $.fn.empty, oRemove = $.fn.remove, extendFct = function (oFct, sender, args) { return oFct.apply(sender, args), $.event.trigger('contentChange'); //=>if testing specific element (#test) use instead following line //return oFct.apply(sender, args), $(sender).trigger('contentChange'); }; $.fn.domManip = function () { extendFct(oDomManip, this, arguments) }; $.fn.html = function () { extendFct(oHtml, this, arguments) }; $.fn.empty = function () { extendFct(oEmpty, this, arguments) }; $.fn.remove = function () { extendFct(oRemove, this, arguments) }; })(jQuery); 

I use: $.event.trigger('contentChange') to fire a custom event.

Called as:

 $(document).contentChange(function () { console.log("onContentChange") }); 

However, if I use:

 $('#test').contentChange(function () { console.log("onContentChange") }); 

Custom event does not fire. Thus, to trigger a custom event for a specific element, I can fire it as follows:

 $(sender).trigger('contentChange'); 

But now, calling the remove() method for myself or the children does not raise my custom event. I can understand that the event callback function is not called if I delete the element, but why is it not called when the children are deleted (while it works, if it is attached to the document!)?

I was expecting this line to make custom event bubbles in '#test':

 $('#test').find('div:first').remove(); 

Is there a way to trigger this custom event associated with a specific element when manipulating this element and / or its children?

Answer 1

I come with a slightly modified version that seems to work just fine to achieve the goal. The needs optimization for the .on() method is expanding, so please feel free to share your feedback.

Inspired from here: https://groups.google.com/forum/?fromgroups=#!topic/jquery-dev/ZaMw2XB6wyM

Thanks Wil Stuckey

Here jsFiddle

 ;(function ($) { var fctsToObserve = { append: [$.fn.append, 'self'], prepend: [$.fn.prepend, 'self'], remove: [$.fn.remove, 'parent'], before: [$.fn.before, 'parent'], after: [$.fn.after, 'parent'] }, fctsObserveKeys = ''; $.each(fctsToObserve, function (key, element) { fctsObserveKeys += "hasChanged." + key + " "; }); var oOn = $.fn.on; $.fn.on = function () { if (arguments[0].indexOf('hasChanged') != -1) arguments[0] += " " + fctsObserveKeys; return oOn.apply(this, arguments); }; $.fn.hasChanged = function (types, data, fn) { return this.on(fctsObserveKeys, types, null, data, fn); }; $.extend($, { observeMethods: function (namespace) { var namespace = namespace ? "." + namespace : ""; var _len = $.fn.length; delete $.fn.length; $.each(fctsToObserve, function (key) { var _pre = this; $.fn[key] = function () { var target = _pre[1] === 'self' ? this : this.parent(), ret = _pre[0].apply(this, arguments); target.trigger("hasChanged." + key + namespace, arguments); return ret; }; }); $.fn.length = _len; } }); $.observeMethods() })(jQuery); 

Answer 2

You need to fire an event for an item that has been modified.

http://jsfiddle.net/Gw4Lj/2/

 return oFct.apply(sender, args), sender.trigger('contentChange'); 

however with this change you will no longer catch an event that was triggered on an element that is not associated with the DOM, because it is not a descendant of this document, which, in my opinion, is good, because it isn’t associated with this DOM, this is in a DOM fragment.