Rileva modifica elemento paragrafo con JQuery

Question

È possibile rilevare se il contenuto di un paragrafo è stato modificato in JQuery?

Ho provato il seguente codice.

<p id="test">Text</p> 
<button id="submit1">change</button> 

-

$(document).on("click", "#submit1", function() { 
    var d = new Date(); 
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
    $("#test").text(time); 
});  
$(document).on("change", "#test", function() { 
    alert("Paragraph changed"); 
}); 

JSFiddle: http://jsfiddle.net/nnbqye55/

Credo che mi manca qualcosa di ovvio.

Answer 1

change gli eventi non verranno attivati ​​sul paragrafo. Quello che ti serve sono gli osservatori di mutazione. Here è la documentazione MDN pertinente. Hanno penetrazione del browser pretty good; per gli IE meno recenti, è possibile utilizzare probabilmente gli eventi di mutazione deprecati, anche se si sa che si tratta di killers delle prestazioni, quindi state molto attenti. Riscriverò il tuo esempio usando Mutation Observers; si può anche verificare un jsFiddle demo:

$(function(){ 
    //Store the test paragraph node 
    var test = $('#test'); 

    //Function to change the paragraph 
    var changeParagraph = function() { 
     var d = new Date(); 
     var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
     test.text(time); 
    }; 

    //Bind the paragraph changing event 
    $('#submit1').on('click', changeParagraph); 

    //Observe the paragraph 
    this.observer = new MutationObserver(function(mutations) { 
     alert('Paragraph changed!') 
    }.bind(this)); 
    this.observer.observe(test.get(0), {characterData: true, childList: true}); 
}); 

Answer 2

quanto riguarda il cambiamento è necessario per attivare evento di modifica come qui di seguito

$(document).on("click", "#submit1", function() { 
    var d = new Date(); 
    var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); 
    $("#test").text(time).trigger("change"); 
});  

$(document).on("change", "#test", function() { 
    alert("Paragraph changed"); 
}); 

JS Fiddle

Answer 3

È possibile collegare l'evento change() solo per <input>, <select> e <textarea> elemento e rilevare la loro variazione di valore. Non su altri elementi. Controllare here

Answer 4

È possibile utilizzare il codice da qui http://quiiver.appspot.com/method_observer_for_jquery e utilizzarlo come

$('#test').bind('text' // the method's name used to change the text 
, function(){ 
    alert("Paragraph changed"); 
}) 

DEMO Tuttavia, funziona solo per le modifiche effettuate tramite jQuery.

Answer 5

Non è necessariamente bisogno di JQuery, nei browser moderni API web include mutation observers. Per i browser più vecchi ci sono mutation events.

mutazione osservatore esempio:

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    alert(mutation.type); 
    });  
}); 

Fiddle con gli osservatori di mutazione: http://jsfiddle.net/nnbqye55/5/

Per le versioni precedenti di supporto JQuery/IE, vedi: https://github.com/kapetan/jquery-observe

Answer 6

si può usare 'DOMSubtreeModified' per verificare i cambiamenti dom sugli elementi del tag html. Vedi il supporto per questo event attraverso i browser.

http://jsfiddle.net/nnbqye55/7/

$(document).on("DOMSubtreeModified", "#test", function() { 
    alert("Paragraph changed"); 
});