如何在对象字段内发生更改时提醒用户答案

【问题标题】：how to alert user when there are changes inside an object field如何在对象字段内发生更改时提醒用户
【发布时间】：2012-10-05 09:43:04
【问题描述】：

如果对象字段内有任何更改，我如何提醒用户

我正在尝试检测对象内这个 div 的变化

如果正常的话，代码是这样的：

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display:none;">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages"></a>
</div>

但如果有更改，它将如下所示：

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display: block; ">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages: 1"></a>
</div>

如果对象内部发生变化，我想通过警报或使用图像来提醒用户。

我有什么办法可以做到这一点？

还有一件事，我无法访问对象内部的代码，我只能查看它而不能编辑它。

【问题讨论】：

谁或什么改变了div？
javascript 但它是服务器端
那么，这些消息来自服务器并反映在该 div 中？向我们展示执行此操作的代码！

标签： javascript object html field alert

【解决方案1】：

我相信一定有一些 JavaScript 代码可以更改您的 html，您可以从那里调用您的方法。其他方式你可以使用 setInterval。

您可以使用 jQuery 插件 Mutation Events plugin for jQuery 。见thread

    var a = document.getElementsByClassName('HeaderNewMessageIcon')[0];
var oldTitle = a.title;
setInterval(function(){
    if(a.title !== oldTitle){
          alert("Title change");  
        oldTitle = a.title;
    }
},100);

jsfiddle

【讨论】：

【解决方案2】：

您必须在通过用户交互（例如单击、鼠标悬停、鼠标按下等）时检测更改...然后您可以附加一个函数以查看其属性或其中的任何内容是否发生更改。

//detect inputs change
$('#HeaderNewMessageIcon').find(':input').change(function(){ alert(...)});

//detect attributes change
$('#HeaderNewMessageIcon').click(function(){
   detectChange(this);
});

要让detectChange起作用，你必须在页面刚加载时保存属性

var attrs = $('#HeaderNewMessageIcon').get(0).attributes;

function detectChange(obj){
    //pseudo-code, you need to find a function on the web to commpare 2 objetcs
    if (obj.attributes === attrs){
        alert(...);
    }

    //the same comparison for the children elements $(obj).children()
}

【讨论】：