Question

我使用的外部API在我的标记中构建了一个div结构（在页面加载时添加了.build-div）。我想用JS / jQuery修改这个结构。问题：如果操作标记，我该如何调用函数。我的尝试：

function changeStructure() { $('.build-div').appendTo('.another'); };
window.onload = changeStructure;

但似乎这不起作用。有效的是：

function changeStructure() { 
  setTimeout(function() { 
     $('.build-div').appendTo('.another'); }, 500) 
};
window.onload = changeStructure;

但我不想对任何猜测的超时进行硬编码以使功能正常工作。那么如何检测元素是否存在并尽快激活函数。

由于

Answer 1

如果API没有事件/回调，您可以使用DOMNodeInserted事件。

$(document).on('DOMNodeInserted', function(e){
    if ($(e.target).is('.build-div')) {
        $(e.target).appendTo('.another');
    }
});

注意：这在IE8中没有支持。除此之外，您将不得不使用计时器来检查元素是否已添加，直到它有，然后您可以将其附加到别处。

Answer 2

Mutation Observers可能值得研究。它们允许您对DOM中的更改做出反应。我用Mutation Observers作为实验写了jQuery Plugin。该插件绝不是生产准备好的，但也许它可以作为您工作的基础。

请注意，Mutation Observers仅受现代浏览器支持。如果您正在寻找更通用的解决方案，可以使用setInterval定期检查是否存在$('.build-div')，然后在加载后清除间隔。

Answer 3

除非＆＃34;外部API＆＃34;提供了表明它已完成DOM修改的信号，你将不得不求助于使用setInterval / clearInterval或链式setTimeouts。

function changeStructure() { 
  if ($('.build-div').length > 0)
  {
    ... your code
    $('.build-div').appendTo('.another');
  }
  else
    setTimeout(changeStructure, 100);
};

如何仅在加载某个元素和标记时调用函数

3 个答案: