jquery find - Evento jQuery: rileva le modifiche all'html / testo di un div




5 Answers

se non vuoi usare il timer e controlla innerHTML puoi provare questo evento

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

maggiori dettagli e dati di supporto del browser sono Here .

fai attenzione: nelle nuove versioni di jQuery bind () è deprecato e puoi usarlo su ()

clone get

Ho un div che ha il suo contenuto che cambia continuamente, sia che si tratti di ajax requests jquery functions , jquery functions , blur ecc. Ecc.

C'è un modo come posso rilevare eventuali modifiche sul mio div in qualsiasi momento?

Non voglio usare nessun intervallo o valore di default controllato.

Qualcosa come questo avrebbe funzionato

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






Non esiste una soluzione integrata per questo problema, questo è un problema con il modello di progettazione e di codifica.

È possibile utilizzare il modello editore / sottoscrittore. Per questo è possibile utilizzare gli eventi personalizzati di jQuery o il proprio meccanismo di eventi.

Primo,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

Ora puoi sottoscrivere eventi divhtmlchanging / divhtmlchanged come segue,

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

Ora, devi modificare le tue modifiche del contenuto div attraverso questa funzione changeHtml() . Pertanto, è possibile monitorare o apportare le modifiche necessarie di conseguenza perché associare l'argomento dei dati di callback contenente le informazioni.

Devi cambiare il tuo html div come questo;

changeHtml('#mydiv', '<p>test content</p>');

Inoltre, puoi usarlo per qualsiasi elemento html tranne per l'elemento di input. In ogni caso è possibile modificare questo da utilizzare con qualsiasi elemento (s).




Utilizzo di Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// 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);



Prova il MutationObserver:

supporto browser: 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>




Related

jquery jquery-ui