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

这可以做到吗？

我也在使用 jQuery。

提前致谢

最佳答案

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

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

关于javascript - 如何观察 'a' 标签的内容 - jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5154882/