使用JQuery检测段落元素更改

是否可以检测JQuery中段落的内容是否已更改？

我尝试了下面的代码。

Text
 change 

–

 $(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/

我想我错过了一些明显的东西。

Answer 1

change事件不会触发段落。 你需要什么被称为变异观察者 。 这是相关的MDN文档。 他们有很好的浏览器渗透率; 对于较旧的IE，您可以使用已弃用的Mutation Events ，尽管这些都是性能杀手，所以要非常小心。 我将使用Mutation Observers重写你的例子; 你也可以查看一个jsFiddle演示 ：

 $(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

您只能将change()事件附加到, 和元素，并检测它们的值更改。 不在其他元素上。 点击这里

Answer 3

在更改时，您必须触发如下所示的更改事件

 $(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小提琴

Answer 4

您可以使用http://quiiver.appspot.com/method_observer_for_jquery中的代码并像使用它一样使用它

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

DEMO但是，它仅适用于通过jQuery进行的修改。

Answer 5

您不一定需要JQuery，在现代浏览器中，Web API包含变异观察器 。 对于较旧的浏览器，存在突变事件 。

变异观察者的例子：

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

摆弄变异观察者： http ： //jsfiddle.net/nnbqye55/5/

有关JQuery /较旧的IE支持，请参阅： https ： //github.com/kapetan/jquery-observe

Answer 6

您可以使用’DOMSubtreeModified’来检查html标记元素的dom更改。 查看跨浏览器对此事件的支持。

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

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