jQuery watch per le modifiche di domElement?

Ho un callback ajax che inietta il markup html in un div footer.jQuery watch per le modifiche di domElement?

Quello che non riesco a capire è come creare un modo per monitorare il div quando cambia il contenuto. Posizionare la logica di layout che sto tentando di creare nel callback non è un'opzione in quanto ogni metodo (callback e il gestore del layout div) non dovrebbe conoscere l'altro.

Idealmente mi piacerebbe vedere un qualche tipo di gestore di eventi simile a $('#myDiv').ContentsChanged(function() {...}) o $('#myDiv').TriggerWhenContentExists(function() {...})

ho trovato un orologio plugin chiamato e una versione migliorata di quel plugin, ma mai potuto ottenere sia per innescare. Ho provato a "guardare" tutto ciò che potevo pensare (vale a dire che la proprietà dell'altezza del div è stata modificata tramite l'iniezione ajax) ma non sono riuscito a farle fare nulla.

Qualche idea/aiuto? Grazie JAS

fonte

2009-12-25 jas

Quale metodo si sta utilizzando per iniettare il contenuto? – outis

in questo caso sto usando il plug-in jQuery Layout. Nel riquadro ovest ho un div del contenuto e il piè di pagina. Il layout viene inizializzato prima della chiamata ajax in modo che il riquadro del contenuto del riquadro occupi il 100% dell'altezza del riquadro. Il mio callback di successo, se esistono più file che room, sa di creare un cercapersone impaginato nel footer div tramite il suo id ... var success = function (data) {$ (divid) .paginate (options); ...}. Ma non sa che si trova in un oggetto di layout. Devo attivare layout.resizeContent ("west"); in qualche modo, ma non voglio cablare la logica del layout dell'interfaccia utente jQuery nel callback. – jas

Il modo più efficace ho trovato è quello di associare all'evento DOMSubtreeModified. Funziona bene sia con jQuery $.html() sia tramite la proprietà standard innerHTML di JavaScript.

$('#content').bind('DOMSubtreeModified', function(e) { 
    if (e.target.innerHTML.length > 0) { 
    // Content change handler 
    } 
});

http://jsfiddle.net/hnCxK/

Quando chiamato da jQuery di $.html(), ho trovato l'evento due volte: una volta per cancellare i contenuti esistenti e una volta per impostarlo. Un rapido .length -check funzionerà in semplici implementazioni.

È anche importante notare che l'evento sarà sempre attivato quando impostato su una stringa HTML (ad esempio '<p>Hello, world</p>'). E che l'evento sarà solo quando modificato per le stringhe di testo normale.

fonte

2012-03-23 19:42:28

Probabilmente vale la pena notare che 'DOMSubtreeModified' è tecnicamente deprecato. Sembra che DOM4 fornirà un'alternativa valida, un giorno. Vedi: http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 –

Si potrebbe voler esaminare l'evento DOMNodeInserted per Firefox/Opera/Safari e l'evento onpropertychange per IE. Probabilmente non sarebbe troppo difficile utilizzare questi eventi, ma potrebbe essere un po 'di hack-ish. Ecco alcuni javascript documentazione degli eventi: http://help.dottoro.com/larrqqck.php

fonte

2009-12-25 11:20:36 rynlbrwn

È possibile ascoltare per modifiche agli elementi del DOM (il tuo div per esempio) per adsorbimento in DOMCharacterDataModified testato in Chrome, ma non funziona in IE vedere un demo here
Facendo clic sul pulsante provoca un cambiamento nel div che viene guardato, che a sua volta si riempie un altro div visualizzare il suo funzionamento ...

Avere un po 'più di uno sguardo Shiki 's risposta a jquery listen to changes within a div and act accordingly sembra che dovrebbe fare quello che vuoi:

$('#idOfDiv').bind('contentchanged', function() { 
    // do something after the div content has changed 
    alert('woo'); 
});

Nella funzione che aggiorna il div:

$('#idOfDiv').trigger('contentchanged');

vedere questo come un working demo here

fonte

2011-03-28 14:02:15 Scoobler

C'è una libreria javascript ordinata, riassunto delle mutazioni di google, che consente di osservare in modo conciso le modifiche dom.La cosa grandiosa è che, se lo desideri, puoi essere informato solo delle azioni che hanno realmente fatto la differenza nel DOM, per capire cosa intendo che dovresti guardare il video molto informativo sulla homepage del progetto.

link: http://code.google.com/p/mutation-summary/

jquery avvolgitore: https://github.com/joelpurra/jquery-mutation-summary

fonte

2012-08-14 11:34:29

jQuery watch per le modifiche di domElement?

risposta

Problemi correlati