Fire jQuery event su div change

Ho un div il cui contenuto può cambiare in vari modi: ad esempio il suo intero contenuto può essere ricaricato tramite innerHTML, oppure i nodes possono essere aggiunti tramite i metodi DOM. Ciò a sua volta può avvenire tramite javascript nativo o indirettamente tramite chiamate all’API jQuery o tramite altre librerie.

Voglio eseguire del codice quando il contenuto del div cambia, ma non ho assolutamente alcun controllo su come cambierà. In effetti sto progettando un widget che può essere usato da altre persone, che sono libere di cambiare il contenuto dei propri div come preferiscono. Quando il contenuto interno di questo div cambia, anche la forma del widget potrebbe dover essere aggiornata.

Sto usando jQuery. C’è un modo per catturare l’evento che il contenuto di questo div è cambiato, comunque è successo?

È ansible utilizzare DOMNodeInserted e DOMNodeRemoved per verificare se gli elementi vengono aggiunti o rimossi. Sfortunatamente, IE non supporta questo.

 $('#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); } }); 

Aggiornare

È ansible salvare i contenuti iniziali e le modifiche future con .data() . Ecco un esempio.

 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); }); }); 

Esempio di output:

 > $('#myDiv').data('initialContents'); "

Hello, world!

This is an example.

" > div_eTypes; ["insert", "insert", "remove"] > div_changes; ["", "

IANA — Example domains

", "

IANA – Example domains

"]

Aggiornamento 2

Potresti voler includere anche DOMSubtreeModified , perché ho scoperto che DOMNodeInserted e DOMNodeRemoved non si triggersno se l’ innerHTML un elemento viene sostituito direttamente. Ancora non funziona in IE, ma almeno funziona bene in altri browser.

prova qualcosa come questo …

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

IE non supporta questo propert, ma penso che il più vicino a questo è l’evento propertychange , che si triggers in risposta a una modifica in un attributo o proprietà CSS di un elemento, ma non si triggers in risposta alla modifica innerHTML, che sarebbe sono stato vicino a quello che volevi.

una soluzione più fattibile è quella di sovrascrivere la funzione di manipolazione di jQuery …

Dai un’occhiata a questa discussione .. Modo preferito di modificare elementi che devono ancora essere creati (oltre agli eventi)

Non c’è un tale evento (onChange) in javascript né jQuery, dovresti creare un evento personalizzato.

Una soluzione potrebbe usare lowpro per colbind un comportamento in questo elemento che si desidera controllare, questo comportamento serializzerebbe l’elemento e quindi costruirà un sondaggio che controlla ogni x millisecondi per vedere se l’elemento è cambiato, se è stato modificato, quindi triggers il tuo evento personalizzato su quell’elemento

Hai alcuni esempi su come usare lowpro con jQuery qui: http://www.learningjquery.com/2008/05/using-low-pro-for-jquery

In bocca al lupo!