观看 HTML 并执行 jQuery 脚本 [重复]答案

【问题标题】：Watch HTML and excecute jQuery script [duplicate]观看 HTML 并执行 jQuery 脚本 [重复]
【发布时间】：2019-03-06 15:09:35
【问题描述】：

如何使用 jQuery 持续观察 HTML，当 div 存在时，执行某些操作。

我已经有了这个：

if ( $( "#works_to_perform_div span.help-block.error-help-block" ).length ) {
    $('#works_to_perform_div span.help-block.error-help-block').appendTo('#works_to_perform_div .question__label');
}

但这不起作用，因为如果将 div 推到屏幕上而不刷新。

有没有类似的观看 div -> 如果 div 存在 -> 做点什么？

【问题讨论】：

使用 setInterval(function() { //你的代码}, 1000).
@TamilSelvanC 这是 MutationObserver 的目的，而不是间隔。
您可能需要重新考虑一下您的逻辑。您能否详细说明您在什么时候需要什么功能？一定有什么东西会触发你正在“寻找”的 div 的追加？不然为什么还要找？但是为什么不将您的事件链接到附加 div 的任何事件呢？我觉得这个问题中遗漏了很多信息。但是，您可以做的是设置一个计时器以每 x 次运行一次您的脚本并检查 div 是否存在。你基本上可以在你的元素上做一个.find() 和.html() 看看它是否包含任何东西。
@Martin this $( "#works_to_perform_div span.help-block.error-help-block" ) 在我按下提交按钮时添加。但是 div 放置在错误的位置（div 之间的某个位置）。所以为什么要附加它。如果我将代码粘贴到浏览器的控制台中，它就可以工作。但那是因为 help-block-error... 已经存在。 $('#works_to_perform_div span.help-block.error-help-block').appendTo('#works_to_perform_div .question__label');

标签： jquery

【解决方案1】：

你可以使用 MutationObserver

来自mdn的示例

// Select the node that will be observed for mutations 
var targetNode = document.getElementById('some-id'); // Options for the observer (which mutations to observe) 
var config = {
  attributes: true,
  childList: true,
  subtree: true
}; // Callback function to execute when mutations are observed 
var callback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type == 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
}; // Create an observer instance linked to the callback function 
var observer = new MutationObserver(callback); // Start observing the target node for configured mutations 
observer.observe(targetNode, config); // Later, you can stop observing 
observer.disconnect();

【讨论】：

【解决方案2】：

我认为你不能用 JQuery 做到这一点。解决方案是添加您想做的任何事情并将其添加到创建 div 的触发器中。使用您描述的逻辑扩展您当前的功能。

发生了一些事情 > div 被创建 >（在此处添加 if 语句 [IF DIV EXISTS]）做某事

编辑：或者，如果你真的需要，你可以尝试这样的事情：

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

这里建议：jQuery Event : Detect changes to the html/text of a div

【讨论】：

你可以用 jQuery 来做，但正如你所指出的，它是非常有害的，具体取决于。然而，这可能是真正需要的，尽管我对此表示怀疑。
DOMSubtreeModified 已经被弃用了一段时间。你真的不应该使用它。请改用MutationObserver
是的，我在这里完全同意@Martin。查看整个页面的 div 不是最佳做法，我不建议这样做，但是我看不到原始代码。