Question

如何使用JQuery的livequery检测DOM中的更改，例如innerHTML更新等。

我试过以下

脚本 -

var matched = function() {
        alert('detected');
};
var unmatched = function() {
    alert('removed')
};

$('div#container').livequery(matched, unmatched)

HTML -

<BODY onload="setTimeout(function(){
        document.getElementById('container').innerHTML = 'updated test';    },3000);">

  <div id="container">test</div>
 </BODY>

但这不起作用。

谢谢， Sourabh

Answer 1

你想做什么不是livequery-plugin的设计目的。

$('div#container').livequery(matched, unmatched);

这告诉livequery：

在找到标识为div的{{1}}时调用匹配的函数，或者使用jQuery DOM操作方法之一将其添加到DOM中
使用jQuery DOM操作方法之一从DOM中删除（或container已更改）div之前找到的container id时调用不匹配的函数

因此，对于您的示例，它只会在页面加载时触发一条提示检测到的警报。由于innerHTML更改既不添加也不删除带有容器的div，因此livequery应该什么也不做，这就是它的作用。

使用*（而非div#container）只会在页面加载时触发几个警报，但只要您使用非jQuery DOM操作方法，就不会再触发。

document.getElementById('container').innerHTML = 'updated test';

不会将matched()作为＃1而不使用jQuery来进行操作; ＃2你没有添加*匹配的新元素。

document.getElementById('container').innerHTML = '<p>updated test</p>'

不会触发matched()，因为你不使用jQuery来进行操作（虽然你添加了一个元素<p>，它将被*选择器匹配但不是由livequery注册，因为它只侦听jQuery DOM操作方法（并且只选择它们）。

如果您使用

$("#container").html('<p>updated test</p>');

它会在3秒后触发matched()。如果你只做

$("#container").html('updated test');

matched()不会被触发，因为只有已经匹配的元素的innerHTML被更改后，*选择器才会匹配任何内容

用于检测dom变化的livequery

1 个答案: