4

サンプルをテストする jsFiddle はこちら

現在、jquery domManip 関数 (一部の関数を拡張) によって「トリガー」された DOM の HTML コンテンツの変更を処理するための jquery スニペットを作成しています。それが最善の方法であるとは限らないので、アドバイスは大歓迎です。このスニペットは、ドキュメントにバインドされている場合、期待どおりに機能します。ただし、特定の要素にバインドしようとすると、.remove()として機能する問題に直面しています。カスタムイベントが通常の伝播動作を使用していないためかもしれませんが、よくわかりません。

これは動作中のサンプルです。'contentChange' イベントをドキュメントにバインドし、テストできるようにクロスブラウザーで動作します: {Win7 での Firefox、IE9、Chrome、および Safari}

;
(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') カスタムイベントをトリガーします。

それのように呼ばれます：

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

ただし、使用する場合：

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

カスタム イベントはトリガーされません。したがって、特定の要素でカスタム イベントをトリガーするには、次のようにトリガーできます。

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

しかし、現在、self または children のメソッドを呼び出してremove()も、カスタム イベントがトリガーされません。要素を削除するとイベントコールバック関数が呼び出されないことは理解できますが、子を削除するときに呼び出されないのはなぜですか (ドキュメントにバインドされている場合は機能しているのに!)?

私は、この行がカスタムイベント バブルを「#test」にすることを期待していました。

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

この要素および/またはその子を操作するときに、特定の要素にバインドされたこのカスタム イベントをトリガーする方法はありますか?

4

2 に答える 2