jQuery:如何监听 DOM 变化? [英] jQuery: How to listen for DOM changes?

问题描述

是否有可能以及如何使用 jQuery 监听整个 DOM 树的变化?

Is it possible and how can I listen for changes through the entire DOM tree with jQuery?

我的具体问题:我有一个工具提示"功能，当您在任何 html 元素上执行 hover 时，它会以时尚的方式显示 title 属性的内容.但是，当您进行悬停时，浏览器按照标准将 title 呈现在其自己的框中.我想压制它.所以我想到的是在第一次加载页面时将 title 属性的内容移动到自定义(HTML5)data-title 属性，然后我的工具提示功能将与 data-title 一起使用.

My specific issue: I have a 'tooltip' function that displays the contents of the title attribute in a stylish way when you do a hover on any html element. When you do a hover, however, by standard the browser renders the title in its own box. I would like to supress that. So what I've thought of is to move the contents of the title attribute to a custom (HTML5) data-title attribute the first time the page is loaded, and then my tooltip function will work with data-title.

问题是稍后我可能会动态添加/删除/更改 HTML，因此我需要重新绑定"这些元素 - 再次更改这些标题属性.如果有一个事件侦听器可以为我侦听此类更改并自动重新绑定元素，那就太好了.

The problem is that later on I might add / remove / change the HTML dynamically, so I need to 'rebind' those elements - change those title attrs again. It would be nice if there was an event listener that would listen for such changes for me and rebind the elements automatically.

推荐答案

我最好的猜测是你想要监听 DOM 突变事件.您可以通过 DOM 突变事件来做到这一点，就像任何普通的 javascript 事件(例如鼠标单击)一样.

My best guess is that you want to listen to DOM mutation events. You can do that by DOM mutation event as any normal javascript event such as a mouse click.

参考:W3 MutationEvent

示例:

$("element-root").bind("DOMSubtreeModified", "CustomHandler");

这篇关于jQuery:如何监听 DOM 变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！