320

、などなどajax requests、コンテンツが常に変化するdivがあります。jquery functionsblur

任意の時点で div の変更を検出できる方法はありますか?

チェックされた間隔またはデフォルト値を使用したくありません。

このようなことができます

$('mydiv').contentchanged() {
 alert('changed')
}
4

13 に答える 13

483

タイマーを使用せずにinnerHTMLをチェックしたくない場合は、このイベントを試すことができます

$('mydiv').on('DOMSubtreeModified', function(){
  console.log('changed');
});

詳細とブラウザのサポート データはこちらです。

于 2013-04-30T04:41:36.213 に答える
34

MutationObserverまたはMutation Eventsを探しています。どこでもサポートされているわけでも、開発者の世界からあまり好意的に見られているわけでもありません。

div のサイズが変更されることがわかっている (そしてそれを確認できる) 場合は、クロスブラウザーのサイズ変更イベントを使用できる場合があります。

于 2013-03-27T11:51:23.813 に答える
2

MutationObserver を試してください:

ブラウザのサポート: http://caniuse.com/#feat=mutationobserver 

<html>
  <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>

于 2016-11-21T14:58:09.833 に答える
2

div の古い innerHTML を変数に格納できます。古いコンテンツが現在のコンテンツと一致するかどうかを確認する間隔を設定します。これが正しくない場合は、何かを行います。

于 2013-03-27T18:46:08.167 に答える
1

DOMSubtreeModifiedは良い解決策ではありません。イベント ハンドラー内で DOM を変更すると、無限ループが発生する可能性があるため、多くのブラウザーで無効になっています。MutationObserverがより良い答えです。

MDN ドキュメント

const onChangeElement = (qSelector, cb)=>{
 const targetNode = document.querySelector(qSelector);
 if(targetNode){
    const config = { attributes: true, childList: false, subtree: false };
    const callback = function(mutationsList, observer) {
        cb($(qSelector))
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
 }else {
    console.error("onChangeElement: Invalid Selector")
 }
}

そして、あなたはそれを次のように使うことができます、

onChangeElement('mydiv', function(jqueryElement){
   alert('changed')
})
于 2020-11-09T06:25:48.957 に答える
0

jQuery を介して、または直接 DOM-API を介して、div にコンテンツを追加すると、デフォルトで.appendChild()関数になります。できることは.appendChild()、現在のオブジェクトの関数をオーバーライドし、オブザーバーを実装することです。関数をオーバーライドし.appendChild()たので、その関数を他のオブジェクトから借用してコンテンツを追加できるようにする必要があります。そのため、他の div の を呼び出して、.appendChild()最終的にコンテンツを追加します。もちろん、これは にも当てはまり.removeChild()ます。

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

ここでは、単純な例を見つけることができます。自分で拡張できると思います。 http://jsfiddle.net/RKLmA/31/

ところで、これは JavaScript が OpenClosed 原則に準拠していることを示しています。:)

于 2013-03-27T11:58:40.090 に答える