自定义事件文档onContentChange [英] Custom event document onContentChange

问题描述

这里jsFiddle测试样本

I我正在编写一个jquery片段来处理由任何jquery domManip函数（扩展一些函数）触发的DOM中的任何html内容更改。不确定这是最好的方式，所以任何建议都会受到欢迎。
如果绑定到文档，则此代码段按预期工作。但是，如果我尝试将其绑定到特定元素，我将遇到一些问题，其中一些功能为 .remove（）。也许这是由于自定义事件没有使用正常的传播行为，但我真的不确定。

I'm currently writing a jquery snippet to handle any html content change in DOM 'triggered' by any jquery domManip function (extending some functions). Not sure it's the best way to do it, so any advices will be welcome. This snippet works as expected if binded to document. However, if i try to bind it to a specific element, i'm facing problem which some function as .remove(). Maybe it's due to custom event not using normal propagation behaviour but i'm really not sure.

这是一个工作示例，我将'contentChange'事件绑定到文档，工作跨浏览器，因为我可以测试它：{Firefox，IE9，Chrome和Safari在Win7下}}

This is a working sample, i bind 'contentChange' event to document, works cross-browser as 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);

我使用： $。event.trigger（'contentChange'）触发自定义事件。

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

调用它：

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

但是，如果我使用：

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

不会触发自定义事件。
因此，要触发特定元素的自定义事件，我可以这样触发：

The custom event is not triggered. So, to trigger a custom event on a specific element, i can triggered it like this:

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

但现在，请致电 remove（）自我或孩子的方法不会触发我的自定义事件。
我可以理解，如果删除元素，将不会调用事件回调函数，但是为什么在删除子元素时不调用它（当它绑定到文档时它正在工作！）

But now, call to remove() method on self or children doesn't triggered my custom event. I can understand that event callback function won't be called if i remove the element, but why isn't it called when removing children (while it's working if binded to document!)?

我期待此行将自定义事件气泡设为'#test'：

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

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

在操作此元素时是否有任何方法可以触发绑定到特定元素的自定义事件和/或它的孩子？

Is there any way to triggered this custom event binded to a specific element when manipulating this element and/or its children?

推荐答案

我带有稍微修改过的版本，似乎可以达到目的。
需要优化 .on（）方法扩展，所以请随时分享您的反馈。

I come with slightly modified version wich seems to work fine for the purpose i reach. Need optimization for the .on() method extend, so please feel free to share your feedbacks.

从这里启发： https://groups.google。 com / forum /？fromgroups =＃！topic / jquery-dev / ZaMw2XB6wyM

感谢Wil Stuckey

Thanks to Wil Stuckey

这里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);

这篇关于自定义事件文档onContentChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！