Question

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

可以这样做吗？

我也在使用jQuery。

提前致谢

Answer 1

你可以使用 jQuery ＆amp;＆amp; 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 event。当内容发生变化时，该事件将触发一个元素。

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

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

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

Answer 4

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

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

或获得如此属性：

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

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

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

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

4 个答案: