web-dev-qa-db-ja.com

div変更時にjQueryイベントを起動する

コンテンツがさまざまな方法で変更される可能性のあるdivがあります。たとえば、コンテンツ全体がinnerHTMLを介して再ロードされるか、ノードがDOMメソッドを介して追加される場合があります。これは、ネイティブjavascriptを介して、またはjQuery APIの呼び出しまたは他のライブラリを介して間接的に発生する可能性があります。

Divの内容が変更されたときにコードを実行したいのですが、絶対にコントロールなし onhowが変更されます。実際、私は自分のdivの内容を好きなように自由に変更できる他の人が使用できるウィジェットを設計しています。このdivの内部コンテンツが変更されると、ウィジェットの形状も更新する必要があります。

JQueryを使用しています。このdivのコンテンツが変更されたイベントをキャプチャする方法はありますか？

javascriptjqueryjavascript-eventswidget
58
Andrea

DOMNodeInsertedおよびDOMNodeRemovedを使用して、要素が追加または削除されたかどうかを確認できます。残念ながら、IEはこれをサポートしていません。

_$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});
_

更新

.data()を使用して、初期内容と将来の変更を保存できます。以下に例を示します。

_var div_eTypes = [],
    div_changes = [];
$(function() {
    $('#myDiv').each(function() {
        this['data-initialContents'] = this.innerHTML;
    }).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
        div_eTypes.concat(e.type.match(/insert|remove/));
        div_changes.concat(this.innerHTML);
    });
});
_

出力例：

_> $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]
_

更新2

要素のDOMSubtreeModifiedが直接置き換えられた場合、DOMNodeInsertedとDOMNodeRemovedはトリガーしないことがわかったため、innerHTMLも含めることができます。 。 IEではまだ動作しませんが、少なくとも他のブラウザーでは正常に動作します。

70
nyuszika7h

このようなものを試してみてください...

    $('#divId').bind('DOMNodeInserted', function(event) {
             alert('inserted ' + event.target.nodeName + // new node
           ' in ' + event.relatedNode.nodeName); // parent
       });

IEはこのプロパティをサポートしていませんが、これに最も近いのは、要素の属性またはCSSプロパティの変更に応じて起動するpropertychangeイベントだと思いますが、 innerHTMLの変更。これは望みに近いものでした。

もう1つの実行可能な解決策は、jqueryの操作機能をオーバーライドすることです...

この議論をご覧ください.. イベントを除いて、まだ作成されていない要素を変更する好ましい方法

7
Vivek

JavaScriptやjQueryにはそのようなイベント（onChange）はありません。カスタムイベントを作成する必要があります。

1つの解決策は、lowproを使用して、制御するこの要素に動作をアタッチすることです。この動作は、要素をシリアル化し、xミリ秒ごとに要素が変更されたかどうかを確認するポーリングを作成します。その要素に。

ここでjQueryでlowproを使用する方法の例があります。 http://www.learningjquery.com/2008/05/using-low-pro-for-jquery

幸運を！

1
Fernando Diaz Garrido