我如何观察“a”的内容标签-jquery

Question

我有一个空白 标签，内容通过外部 JavaScript 片段加载到其中。我想观察 并在其内容更改时执行另一项任务。内容只会改变一次。

这可以做到吗？

我也在使用 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);

理论上这应该有效，但我还没有测试过。

Answer 3

您可以利用 DOMSubtreeModified 事件 。当元素的内容发生更改时，该事件会在元素上触发。

$('a').bind('DOMSubtreeModified', function() {
    // contents changed   
});

注意：此事件不会在 Opera 和旧版本的 IE 中触发（但在 IE9 中有效）。

现场演示： http://jsfiddle.net/simevidas/pLvgM/

Answer 4

a 标签的内容是什么意思？您可以像这样执行此操作：

$('#linkElementID').html();

或者获取像这样的属性：

$('#linkElementID').attr("title"); //Title Attribute 
$('#linkElementID').attr("href"); //href Attribute etc etc 

我不认为标签更改时会触发事件， .change() 事件仅由输入区域触发并选择列表。

您需要在加载新插入内容的事件之后进行检查。