13

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

这可以做到吗？

我也在使用 jQuery。

提前致谢

4

4 回答 4

6

您可以混合使用jQuery && DOM Level 3 事件（请参阅下面的浏览器支持）。

如果您想检查content中的任何更改，您可以这样做：

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被覆盖方法中的值是否代表正确的 DOM 节点。

于 2011-03-01T13:20:02.673 回答
5

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

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

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

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

于 2011-03-01T13:08:52.220 回答
3

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

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

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

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

于 2011-03-01T13:17:32.613 回答
0

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

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

或获取如下属性：

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

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

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

于 2011-03-01T13:09:58.757 回答