是否有可能以及如何使用 jQuery 监听整个 DOM 树的变化？
我的具体问题：我有一个“工具提示”功能，当您在任何 html 元素上执行 hover 时，它会以时尚的方式显示 title 属性的内容。但是，当您进行悬停时，按照标准，浏览器会在自己的框中呈现 title。我想抑制它。所以我想到的是在第一次加载页面时将title属性的内容移动到自定义（HTML5）data-title属性，然后我的工具提示功能将与data-title一起使用。
问题是稍后我可能会动态添加/删除/更改 HTML，因此我需要“重新绑定”这些元素 - 再次更改这些标题属性。如果有一个事件侦听器可以为我侦听此类更改并自动重新绑定元素，那就太好了。
【问题讨论】：
标签： javascript jquery html events
我最好的猜测是你想监听 DOM 突变事件。 您可以通过 DOM 突变事件来实现这一点，就像任何普通的 javascript 事件一样，例如鼠标点击。
参考这个：W3 MutationEvent
例子：
$("element-root").bind("DOMSubtreeModified", "CustomHandler");
【讨论】：
[为回复成员 Tony 的研究而编辑]
所以，如果没有额外的代码，这有点盲目，但在我看来，这里有两件事需要考虑：1. 默认浏览器工具提示行为； 2. 可能更新的 DOM 以及您的自定义工具提示继续运行的能力。
关于#1：当您将自定义事件绑定到元素时，您可以使用 这不能正常工作。因此，继续使用“title”属性的解决方法是获取值，将其推送到数据对象（event.preventDefault()，这样工具提示就不会出现。$.data() 函数），然后使用空字符串将标题设为空（removeAttr 不一致）。然后在 mouseleave 上，您从数据对象中获取值并将其推回标题中。这个想法来自这里：How to disable tooltip in the browser with jQuery?
关于#2：你只需绑定一次监听器元素，而不是在 DOM 更改时重新绑定，该监听器元素永远不会被销毁。通常这是某种容器元素，但如果你真的需要一个包罗万象的容器，它甚至可以是document（近似于.live()，现在已弃用）。这是一个使用我自己设计的一些虚假标记的示例：
var container = $('.section');
container.on('mouseenter', 'a', function() {
var $this = $(this);
var theTitle = $this.attr('title');
$this.attr('title', '');
$('#notatooltip').html(theTitle);
$.data(this, 'title', theTitle);
});
container.on('mouseleave', 'a', function() {
$('#notatooltip').html('');
var $this = $(this);
var storedTitle = $.data(this, 'title');
$this.attr('title', storedTitle);
});
我不切实际的标记（仅用于此示例）在这里：
<div class="section">
<a href="#" title="foo">Hover this foo!</a>
<div id="notatooltip"></div>
</div>
这里有一个小提琴：http://jsfiddle.net/GVDqn/ 或者进行一些健全性检查：http://jsfiddle.net/GVDqn/1/
可能有一种更优化的方法来做到这一点（老实说，我没有研究是否可以使用一个选择器为两个单独的事件绑定两个单独的函数）但它会成功。
您不需要根据 DOM 更改重新绑定，委托的侦听器会自动处理它。您应该能够通过阻止默认工具提示功能来阻止它。
【讨论】：
preventDefault 不会阻止在 mouseover 上显示标题（至少在 Chrome 中）-code.google.com/p/chromium/issues/detail?id=42549
正如 Greg Pettit 所说，您应该在元素上使用 on() 函数。
允许您将选择器绑定到事件，然后jQuery将在选择器返回的对象可用时添加此事件处理程序。
如果您希望一个函数在鼠标悬停事件上触发，并且您希望它在所有具有 *field_title* 类的元素上触发，您可以这样做：
$('.field_title').bind('mouseenter', function() { doSomething(); });
这将在任何具有 *field_title* 类的对象上触发鼠标悬停事件并执行函数 doSomething().
希望这是有道理的:)
【讨论】：
.bind('mouseenter')而不是.('mouseenter')。