Question

我试图扫描页面上的所有文本，并有选择地在文本片段上创建工具提示。我有工作代码来执行此操作，但它仅适用于DOM ready事件触发时页面上的文本。由于.live()函数已被弃用，我们应该使用.on()，但该函数仅适用于调用它时存在的元素。委托事件处理程序适用于当前和未来元素，但要求绑定事件冒泡到父级，load事件不起泡。

那么我怎样才能动态加载所有文本 - 甚至是所有元素 - ？

更新

Per Makaze的评论，我尝试了几种方法。到目前为止，这个似乎最接近，但并不完全：

$('body').on('DOMNodeInserted', '*:not("script")', function(e){
console.dir(e.target);  //drill in here, I can see the nodeType==3 nodes
//var find = $(e.target);
var nodes = flattenTree(e.target.childNodes, 0);    //recursively get all child nodes
for(var i in nodes){
    var elem = $(nodes[i]);
    var parent = elem.parent();
    var txt = elem.text();
    if(txt!==undefined && !txt.match(/^\s*$/)){
        var refs = txt.match(versePattern);
        if(refs!==null){
            //var i = 0;
            console.log(refs);  //I never see the text node here, but I see it above when I manually drill into e.target

versePattern符合我对此代码的静态版本（正常工作）的期望，因此我不认为这是问题所在。此外，'*:not("script")'似乎不起作用，因为我仍然看到<script>标签，但这是我稍后可以处理的一件小事。

Answer 1

MutationObserver构造函数是您想要的。将它绑定到父元素或文档，并从那里过滤您的突变。

＆＃13;

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.addedNodes);
  });
});

// configuration of the observer:
var config = {
  attributes: true,
  childList: true,
  characterData: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);

setTimeout(function() {
  target.appendChild(document.createTextNode('There!'));

  // later, you can stop observing
  // observer.disconnect();
}, 1000);

＆＃13;

<div id="some-id">Wait for it...</div>

＆＃13;

旁注：您可以在文档上使用.on()并使用选择器过滤类似于.delegate()的目标：$(parentSelectors).on(types, childSelectors, function)。

Answer 2

刚刚初始化了您要将工具提示放在js文件上的所有文本框。

示例;

//Initialize Tooltip
$('#Name').tooltip()
$('#Age').tooltip()
$('#Address').tooltip()

如何使用jQuery动态添加文本

2 个答案: