在其他JS文件动态加载内容后执行jQuery

Question

我正在努力修改一些通过另一个脚本（我们称之为脚本#1）动态加载到我网站上的内容。脚本 #1 加载一些标记和内容，我一直在使用 setTimeout() 函数调用我的脚本（脚本 #2），使用几秒钟的延迟，以等待确保脚本 #1 已执行并内容存在于 DOM 中。

我的问题是 Script#1 有不同的加载时间，基于服务器负载，可能会很慢或很快，具体取决于这些因素，现在，使用 setTimeout() 安全播放我经常留下一两秒钟，我的脚本仍在等待被触发，脚本 #1 已经加载了内容。

如何在脚本#1 成功加载其动态内容后立即执行我的脚本？

我发现 this post 似乎确实解决了同样的问题，但由于某些原因，使用 @Matt Ball 在那里布置的 setInterval 函数根本不起作用。我正在使用下面的代码，其中 'div.enrollment' 用于在动态加载和执行的 DOM 中查找。

jQuery(window).load(function ($)
  {
      var i = setInterval(function ()
      {
          if ($('div.enrollment').length)
          {
              clearInterval(i);
              // safe to execute your code here
              console.log("It's Loaded");
          }
      }, 100);
  });

非常感谢任何有关这方面指导的帮助！谢谢你的时间。

Answer 1

如果您只想加载一些标记和内容，然后运行一些脚本，您可以使用 jQuery。您应该在脚本#1 中使用类似下面的内容来运行脚本#2

中的函数

$.get( "ajax/test.html", function( data ) {
    // Now you can do something with your data and run other script.
    console.log("It's Loaded");
});

函数在 ajax/test.html 加载后被调用。

希望对您有所帮助

Answer 2

看来 healcode.js 做了很多事情。 <healcode-widget> 标签中添加了大量标记。

我会尝试添加另一个带有 id 的标签并测试它是否存在：

<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>

在区间内测试 <healcode-widget> 中是否存在 healCodeLoading：（假设 jQuery）

var healCodeLoadingInterval = setInterval(function(){ 
    var healCodeLoading = jQuery('healcode-widget #healCodeLoading');

    if (healCodeLoading.length == 0) {
        clearInterval(healCodeLoadingInterval);

        // Everything should be loaded now, so you can do something here
    }
}, 100);

healcode.js 应该在初始化期间替换 <healcode-widget></healcode-widget> 中的所有内容。因此，如果您的 <div> 元素不再位于内部，则该小部件已加载并初始化。

希望对您有所帮助。

在其他JS文件动态加载内容后执行jQuery

Execute jQuery after Other JS file Dynamically loads content

javascript

jquery

dynamic