如何观察'a'标签的内容 - jquery

Question

我有一个空白<a>标签,内容通过外部javascript加载.我想观察<a>它及其内容更改何时执行另一项任务.内容只会改变一次.

可以这样做吗？

我也在使用jQuery.

提前致谢

Answer 1

您可以使用jQuery && DOM Level 3事件中的混合(请参阅下面的浏览器支持).

如果要检查内容中的任何更改,可以执行以下操作:

var $a = $('a');

$a.one('DOMNodeInserted', function(e) {
    console.log('content changed!: ', e);    

    console.log('new content: ', $(this).html());   
});

$a.one('DOMAttrModified', function(e) {
    console.log('attribute changed!: ');        

    console.log('attribute that was changed: ', e.attrName);
});

请参阅此代码:http://jsfiddle.net/wJbMj/1/

参考:DOMNodeInserted,DOMAttrModified

虽然上面的解决方案对我来说实际上非常方便,但它只适用于支持这些事件的浏览器.为了有一个更通用的解决方案,你可以钩到jQuerys setter方法.这个解决方案的缺点是,您将只捕获通过jQuery完成的更改.

var _oldAttr = $.fn.attr;
$.fn.attr = function() {
    console.log('changed attr: ', arguments[0]);
    console.log('new value: ', arguments[1]);
    return _oldAttr.apply(this, arguments);
};

你可以挂接到.text(),并.html()以完全相同的方式.您需要检查this覆盖方法中的值是否表示正确的DOMnode.

Answer 2

您可以尝试监视标记的.html()以查看它是否更改为其他任何内容...

也许有一个定时函数(每隔n秒执行一次)监视元素的内容(.html()),直到它发生变化,然后停止监视它.也许有些东西:

var monitor = true;
var doMonitor = function() {
  monitor = $("#theanchor").html() != "the initial value";
  if (monitor)
    setTimeout(doMonitor,500);
};
setTimeout(doMonitor,500);

理论上这应该有用,但我还没有测试过.