jQuery watch div

C'è un modo per vedere se il contenuto di un div cambia?jQuery watch div

Diciamo che ho:

<div id="hello"><p>Some content here</p></div>

che a un certo punto 5 secondi dopo modifiche:

<div id="hello"><ul><li>This is totally different!</li></ul></div>

Come posso essere informati di tale tramite un callback o qualcos'altro? Nella maggior parte dei casi posso ottenere la javascript che sta facendo l'inserimento, per dirmelo. Ma volevo sapere se era possibile.

fonte

2010-07-13 ash

C'è una ragione che la funzione che cambia il contenuto div non può avvisarti? – Josiah

Il .Per passare jQuery() metodo funziona solo per i campi del modulo.

ho scritto un po 'di plugin per jQuery per voi:

<!-- jQuery is required --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 


<!-- this is the plugin --> 

<script> 
    jQuery.fn.contentChange = function(callback){ 
    var elms = jQuery(this); 
    elms.each(
     function(i){ 
     var elm = jQuery(this); 
     elm.data("lastContents", elm.html()); 
     window.watchContentChange = window.watchContentChange ? window.watchContentChange : []; 
     window.watchContentChange.push({"element": elm, "callback": callback}); 
     } 
    ) 
    return elms; 
    } 
    setInterval(function(){ 
    if(window.watchContentChange){ 
     for(i in window.watchContentChange){ 
     if(window.watchContentChange[i].element.data("lastContents") != window.watchContentChange[i].element.html()){ 
      window.watchContentChange[i].callback.apply(window.watchContentChange[i].element); 
      window.watchContentChange[i].element.data("lastContents", window.watchContentChange[i].element.html()) 
     }; 
     } 
    } 
    },500); 
</script> 



<!-- some divs to test it with --> 

<p>Testing it: (click on divs to change contents)</p> 

<div id="a" onclick="$(this).append('i')">Hi</div> 
<div id="b" onclick="$(this).append('o')">Ho</div> 
<div class="c" onclick="$(this).append('y')">He</div> 
<div class="c" onclick="$(this).append('w')">He</div> 
<div class="c" onclick="$(this).append('a')">He</div> 




<!-- this is how to actually use it --> 

<script> 
    function showChange(){ 
    var element = $(this); 
    alert("it was '"+element.data("lastContents")+"' and now its '"+element.html()+"'"); 
    } 

    $('#a').contentChange(function(){ alert("Hi!") }); 
    $('div#b').contentChange(showChange); 
    $('.c').contentChange(function(){ alert("He he he...") }); 
</script>

essere consapevoli che questo guarda i cambiamenti nel contenuto dell'elemento (html), NON con gli attributi.

fonte

2010-07-13 06:20:57

Grazie. Chiaramente l'unico modo per farlo è impostare manualmente un timer.Probabilmente non avrò mai bisogno di usare il plugin, ma complimenti per averlo scritto. – ash

Ricorda che questo orologio cambia solo nel contenuto dell'elemento (html), non negli attributi. –

Puoi testarlo qui: http://jsfiddle.net/KpA2C/ –

Chi/cosa cambierà questo? Se è un JS che controlli, usalo per attivare anche la tua callback. Ovviamente un utente non può cambiarlo.

Se si desidera vedere un elemento <input>, utilizzare l'evento 'modifica'. jQuery versione qui: http://api.jquery.com/change/

fonte

2010-07-13 03:33:03 psychotik

Ecco un esempio di codice che chiama un semplice avviso quando i dati valore cambia:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>watchu, watchu, watchu want, watchu want?</title> 
</head> 
<body> 

    <div id='foo'>Hello World!</div> 

    <p><input type="button" id="ChangeButton" value="Change It" /></p> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

     $(function() { 

      $('#ChangeButton').click(function() { 
       $('#foo').html('Awfveeterzain!'); 
      }); 

      window.watchForChangeOriginalValue = $('#foo').html(); 
      watchForChange(); 
     }); 

     function watchForChange() { 
      if ($('#foo').html() != window.watchForChangeOriginalValue) 
       alert('the value changed!'); 
      else 
       window.setTimeout(watchForChange, 500); 
     } 

    </script> 
</body> 
</html>

fonte

2010-07-13 05:09:02 a7drew

Non c'è alcun evento jQuery/DOM nativo che si attiva quando il contenuto HTML/DOM cambia.

Si potrebbe (se vi sentite particolarmente dispendiosa) fare qualcosa di simile:

$(function() { 
    var $div = $("#hello"); 
    var html = $div.html(); 
    var checking = setInterval(function() { 
    var newhtml = $div.html(); 
    if (html != newhtml) { 
     myCallback(); 
     html = newhtml; 
    } 
    },100); 

    function myCallback() { 
    alert('content changed!'); 
    // if you only want it to fire once, uncomment the following: 
    // clearInterval(checking); 
    } 
});

Basta ricordare, chiamando .html() ogni 100ms non è probabilmente la migliore idea per le vostre prestazioni siti.

jsFiddle mockup

fonte

2010-07-13 06:37:17 gnarf

In realtà, c'è. di questi cosiddetti [eventi di mutazione] (https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events) è [lento] (http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb? pli = 1), comunque. –

Forse, è ragionevole per monitorare la fonte di eventi che modificano il contenuto del vostro livello (s)? Supponiamo che un utente abbia cliccato ovunque (leggi "ha fatto un clic") dopo che cosa il contenuto poteva essere cambiato. Quindi, se si controlla il file .html() dopo un clic anziché utilizzare un ciclo, è possibile che vengano salvate alcune risorse di sistema.

fonte

2011-10-23 17:35:32 Nixter

Ci sono alcuni eventi chiamati DOMNodeInserted, DOMNodeRemoved e DOMSubtreeModified. A quale controllo ci sono elementi aggiunti o rimossi o qualsiasi Html interno modificato all'interno di un div. per questo è necessaria una funzione setInterval().

function DivChange() {  
    $('#YourDiv').bind('DOMNodeInserted DOMNodeRemoved', function (event) { 
     if (event.type == 'DOMNodeInserted') { 
      alert('Content added'); 
     } else if (event.type == 'DOMNodeRemoved') { 
      alert('Content removed'); 
     } else { 
      alert('Inner Html changed for some content'); 
     } 
    }); 
} 
var DivTimer = setInterval(DivChange, 1000);

Le funzioni di cui sopra saranno controlli div per qualsiasi variazione di contenuto, per ogni secondo

Nota: Questi eventi non sono supportati da IE

fonte

2016-05-10 14:36:33 Prem

jQuery watch div

risposta

Problemi correlati