Änderungen im DOM erkennen

Question

Ich möchte eine Funktion ausführen, wenn ein div oder eine Eingabe zur html-Datei hinzugefügt wird. Ist dies möglich?

Wird zum Beispiel eine Texteingabe hinzugefügt, so sollte die Funktion aufgerufen werden.

Answer 1

Oder Sie können einfach Erstellen Sie Ihre eigene Veranstaltung , die überall laufen

 $("body").on("domChanged", function () {
                //dom is changed 
            });

 $(".button").click(function () {

          //do some change
          $("button").append("<span>i am the new change</span>");

          //fire event
          $("body").trigger("domChanged");

        });

Vollständiges Beispiel http://jsfiddle.net/hbmaam/Mq7NX/

Answer 2

Verwenden Sie die MutationObserver Schnittstelle, wie sie in Gabriele Romanatos Blog

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

// The node to be monitored
var target = $( "#content" )[0];

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
        var $nodes = $( newNodes ); // jQuery set
        $nodes.each(function() {
            var $node = $( this );
            if( $node.hasClass( "message" ) ) {
                // do something
            }
        });
    }
  });    
});

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);

// Later, you can stop observing
observer.disconnect();

Answer 3

8 Jahre später, hier ist meine Lösung mit MutationObserver et RxJS

observeDOMChange(document.querySelector('#dom-changes-here'))
  .subscribe(val => log('DOM-change detected'));

Der Hauptunterschied zu den anderen Ansätzen besteht im Abfeuern einer CustomEvent bei DOM-Änderungen, und hören Sie auf das Ereignis entprellt, um Benutzer-Logik effizient mit den folgenden Funktionen auszuführen;

• Entprellung von aufeinanderfolgenden DOM-Änderungen, um zu viele Ausführungen zu verhindern
• Beenden Sie die Wiedergabe nach der vorgegebenen Zeit
• Entfernt Ereignis-Listener/Teilnehmer, nachdem sie keine DOM-Änderungen mehr beobachten

• Nützlich, um DOM-Änderungen in einem Framework, z. B. Angular, zu beobachten.

  import { fromEvent, timer} from 'rxjs'; import { debounceTime, takeUntil, tap } from 'rxjs/operators';

  function observeDOMChange(el, options={}) { options = Object.assign({debounce: 100, expires: 2000}, options);

  const observer = new MutationObserver(list => { el.dispatchEvent(new CustomEvent('dom-change', {detail: list})); }); observer.observe(el, {attributes: false, childList: true, subtree: true });

  let pipeFn; if (options.expires) { setTimeout( => observer.disconnect(), options.expires); pipeFn = takeUntil(timer(options.expires)); } else { pipeFn = tap( => _); }

  return fromEvent(el, 'dom-change') .pipe(pipeFn, debounceTime(options.debounce)); }

Demo bei Stackblitz.

Answer 4

Wie wäre es, ein Jquery dafür zu erweitern?

   (function () {
        var ev = new $.Event('remove'),
            orig = $.fn.remove;
        var evap = new $.Event('append'),
           origap = $.fn.append;
        $.fn.remove = function () {
            $(this).trigger(ev);
            return orig.apply(this, arguments);
        }
        $.fn.append = function () {
            $(this).trigger(evap);
            return origap.apply(this, arguments);
        }
    })();
    $(document).on('append', function (e) { /*write your logic here*/ });
    $(document).on('remove', function (e) { /*write your logic here*/ });

Jquery 1.9+ hat Unterstützung für diese (ich habe gehört, nicht getestet).

Answer 5

Verwenden Sie TrackChanges, um HTML-Änderungen zu erkennen. Link: https://www.npmjs.com/package/track-changes-js

Beispiel

 let button = document.querySelector('.button');

 trackChanges.addObserver('buttonObserver', () => button);

 trackChanges.addHandler('buttonObserver', buttonHandler);

 function buttonHandler(button) {
   console.log(`Button created: ${button}`);
 }