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

【问题标题】：How can I Observe the contents of an 'a' tag - jquery如何观察“a”标签的内容 - jquery
【发布时间】：2011-03-01 22:27:28
【问题描述】：

我有一个空白的<a> 标记，内容是通过外部javascript 加载的。我想观察<a> 并在其内容更改时执行另一项任务。内容只会更改一次。

这个可以吗？

我也在使用 jQuery。

提前致谢

【问题讨论】：

你要观察“内容”还是href属性？
nope OBSERVE HERE 的实际内容
在执行更改后让您的外部 javascript 调用一个函数不是更容易吗？
这个 JavaScript 不是我们写的。

标签： javascript jquery dom observer-pattern dom-manipulation

【解决方案1】：

您可以混合使用 jQuery && DOM 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

虽然上述解决方案对我来说实际上非常方便，但它只适用于支持这些事件的浏览器。要获得更通用的解决方案，您可以 hook 到 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 值是否代表正确的 DOM 节点。

【讨论】：

@jAndy 在 Chrome 的控制台中只记录 DOMNodeInserted 事件，而在 Firebug 中只记录 DOMAttrModified 事件。你有同样的结果吗？
@Šime Vidas：FireFox 适用于这两种事件类型，Chrome 似乎只适用于 DOMNodeInserted。不幸的是，这些事件类型已被弃用，没有任何替代品 (afaik)。
@jAndy DOM 3 事件规范说："A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner."。你知道那是什么其他规格吗？
@jAndy 顺便说一句，我再次检查了 Firefox，DOMNodeInserted 工作正常。
@Šime Vidas：啊。我知道我读过类似的东西，但我再也找不到了。但很高兴知道这些事件仍将以某种形式提供。但不幸的是，我不知道那会是什么样子。

【解决方案2】：

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

也许有一个定时函数（每 n 秒执行一次），它监视元素的内容 (.html()) 直到它发生变化，然后停止监视它。也许是这样的：

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

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

【讨论】：

将其更改为setTimeout(doMonitor, 500)，这是一个很好的答案！您应该始终将函数而不是字符串传递给setTimeout。
哈哈！好久没做“setTimeout()”了。就像我说的，它应该在理论上有效，因为我还没有测试过。现在根据您的建议更改它。

【解决方案3】：

您可以使用DOMSubtreeModified event。当元素的内容发生变化时，该事件会在元素上触发。

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

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

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

【讨论】：

+1 for the Note... 这将像 W3C 规范一样工作，但是，由于它依赖于浏览器，因此在许多地方都不起作用。 JQuery 插件（看我的回答）受到更多限制（不会通过添加、删除和此类 DOM 事件进行侦听），但会在任何（IE6+，现代？！）浏览器中按预期触发。
@NemoStein 该插件是如何工作的？你能做一个jsfiddle吗？
对不起@Šime，插件不再工作了...我建议删除我的答案...
@Nemo 它是为 jQuery 1.3 制作的，所以它可能适用于旧版本。

【解决方案4】：

a 标签的内容是什么意思？你可以这样做：

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

或者像这样获取一个属性：

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

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

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

【讨论】：