Rileva le modifiche del contenuto dell’elemento con jQuery

change() funziona e rileva le modifiche sugli elementi del modulo, ma esiste un modo per rilevare quando il contenuto di un elemento DOM è stato modificato?

Questo non funziona, a meno che #content sia un elemento del modulo

 $("#content").change( function(){ // do something }); 

Voglio che questo si inneschi quando si fa qualcosa del tipo:

 $("#content").html('something'); 

Anche la funzione html() o append() non ha una callback.

Eventuali suggerimenti?

Questi sono eventi di mutazione .

Non ho usato API di eventi di mutazione in jQuery, ma una ricerca rapida mi ha portato a questo progetto su GitHub. Non sono a conoscenza della maturità del progetto.

So che questo post è vecchio di un anno, ma mi piacerebbe fornire un approccio diverso per coloro che hanno un problema simile:

  1. L’evento di modifica jQuery viene utilizzato solo sui campi di input dell’utente perché se qualcos’altro viene manipolato (ad esempio un div), tale manipolazione proviene dal codice. Quindi, trova dove si verifica la manipolazione e quindi aggiungi tutto ciò che ti serve.

  2. Ma se questo non è ansible per nessuna ragione (stai usando un plugin complicato o non riesci a trovare alcuna possibilità di “callback”) allora l’approccio di jQuery che suggerirei è:

    un. Per una semplice manipolazione del DOM, usa jQuery concatenare e attraversare, $("#content").html('something').end().find(whatever)....

    b. Se desideri fare qualcos’altro, usa il bind di jQuery con un evento personalizzato e triggerHandler

     $("#content").html('something').triggerHandler('customAction'); $('#content').unbind().bind('customAction', function(event, data) { //Custom-action }); 

Ecco un link al gestore di trigger jQuery: http://api.jquery.com/triggerHandler/

che dire di http://jsbin.com/esepal/2

 $(document).bind("DOMSubtreeModified",function(){ console.log($('body').width() + ' x '+$('body').height()); }) 

Questo evento è stato deprecato a favore dell’API Mutation Observer

Il browser non genererà l’evento onchange per gli elementi

.

Penso che il ragionamento dietro questo sia che questi elementi non cambieranno se non modificati da javascript. Se hai già bisogno di modificare l’elemento tu stesso (piuttosto che farlo dall’utente), puoi semplicemente chiamare il codice di accompagnamento appropriato nello stesso momento in cui modifichi l’elemento, in questo modo:

  $("#content").html('something').each(function() { }); 

Puoi anche licenziare manualmente un evento come questo:

  $("#content").html('something').change(); 

Se nessuna di queste soluzioni funziona per la tua situazione, potresti fornire maggiori informazioni su ciò che stai specificamente cercando di ottenere?

Prova a associare l’evento DOMSubtreeModified al controllo poiché anche test fa parte del DOM.

vedi questo post qui su SO:

how-do-i-Monitor-the-dom-per-le modifiche

Prova questo, è stato creato da James Padolsey (JP qui su SO) e fa esattamente quello che vuoi (credo)

http://james.padolsey.com/javascript/monitoring-dom-properties/

E con HTML5 abbiamo osservatori di mutazione DOM nativi .

Non è strettamente una risposta jQuery, ma utile da menzionare per il debug.

In Firebug puoi fare clic con il tasto destro del mouse su un elemento nell’albero DOM e impostare “Break on Attribute Change”:

Elemento clicca con il tasto destro su Firebug con Break on Attribute Change evidenziato

Quando un attributo viene modificato in uno script, viene visualizzata la finestra di debug e puoi rintracciare cosa sta succedendo. C’è anche un’opzione per l’inserimento di elementi e la rimozione degli elementi di seguito (non abilmente oscurato dal popup nello screengrab).

Prova il plugin livequery. Sembra funzionare per qualcosa di simile che sto facendo.

http://docs.jquery.com/Plugins/livequery

Sto sviluppando una piccola libreria JS chiamata mutabor ( https://github.com/eskat0n/mutabor ) che intendeva semplificare l’utilizzo degli eventi di mutazione DOM. Vedi demo.html per gli esempi.

Spesso un modo semplice ed efficace per raggiungere questo objective è quello di tenere traccia di quando e dove si sta modificando il DOM.

Puoi farlo creando una funzione centrale che è sempre responsabile della modifica del DOM. Quindi esegui qualsiasi operazione di pulizia di cui hai bisogno sull’elemento modificato all’interno di questa funzione.

In un’applicazione recente, non avevo bisogno di azioni immediate, quindi ho usato un callback per la funzione handly load (), per aggiungere una class a qualsiasi elemento modificato e poi aggiornato tutti gli elementi modificati ogni pochi secondi con un timer setInterval.

 $($location).load("my URL", "", $location.addClass("dommodified")); 

Quindi puoi gestirlo come vuoi – ad es

 setInterval("handlemodifiedstuff();", 3000); function handlemodifiedstuff() { $(".dommodified").each(function(){/* Do stuff with $(this) */}); } 

È ansible aggiungere un’opzione di richiamata alla funzione html (o qualsiasi):

 $.fn.oldHtml = $.fn.html; $.fn.html = function(html,fn){ fn = fn || function(){}; var result = this.oldHtml(html); fn(); return result; }; $('body').html(11,function(){alert("haha");}); 

Demo qui.

Tu fai la modifica su qualche elemento, non l’elemento è costretto a cambiare da qualcosa che devi catturare.

Ho scritto uno snippet che controllerà la modifica di un elemento in un evento.

Quindi, se stai usando un codice javascript di terze parti o qualcosa del genere e hai bisogno di sapere quando qualcosa appare o cambia quando hai cliccato, puoi farlo.

Per il frammento di seguito, diciamo che è necessario sapere quando un contenuto della tabella cambia dopo aver fatto clic su un pulsante.

 $('.button').live('click', function() { var tableHtml = $('#table > tbody').html(); var timeout = window.setInterval(function(){ if (tableHtml != $('#table > tbody'). console.log('no change'); } else { console.log('table changed!'); clearInterval(timeout); } }, 10); }); 

Codice Pseudo:

  • Una volta che fai clic su un pulsante
  • l’html dell’elemento che si aspetta di cambiare viene catturato
  • quindi controlliamo continuamente l’html dell’elemento
  • quando troviamo che l’html è diverso, interrompiamo il controllo

Possiamo raggiungere questo objective utilizzando gli eventi di mutazione . Secondo http://www.w3.org, il modulo di evento mutazionale è progettato per consentire la notifica di eventuali modifiche alla struttura di un documento, incluse le modifiche attr e text. Per ulteriori dettagli EVENTI DI MUTAZIONE

Per esempio :

 $("body").on('DOMSubtreeModified', "#content", function() { alert('Content Modified'); // do something }); 

Non è ansible, credo che esista un evento di contenuto modificato, ma non è certamente x-browser

Devo dire che non è ansible senza un brutto intervallo scoppiare in sottofondo!