javascript - 如何从动态加载到我的 div 中的外部 html 文件运行 JavaScript 函数？

Question

我使用以下方式将外部 html 页面插入到我的 div 中:

      $.ajax({
          url: "myHTML.html",
          method: 'GET',
          success: function (data) {
              $("#outputDiv").html(data);
          },
          Error: function (err) {
              alert("ERROR: " + err);
          }
      });

效果很好，问题是我想运行一些位于“myHTML.html”文件中的 JavaScript 函数，有没有办法做类似的事情？

谢谢(=

Answer 1

将脚本保留在要加载内容的页面中通常要容易得多。如果您有一组文件都使用相同的 ajx 来加载，并且都调用相同的函数，则尤其如此。这减少了通过代码修订来更改多个文件的需要。

$.ajax({
      url: "myHTML.html",
      method: 'GET',
      success: function (data) {
          $("#outputDiv").html(data);
          /* new html exits so can run code here that affects it*/
          newHtmlAdded();
      },
      error: function (err) {/* note typo on capital "E" fixed*/
          alert("ERROR: " + err);
      }
  });

  function newHtmlAdded(){
       fixmFormStyle();
       addMyValidation(); 
      doSomethingElse();
  }

否则，重要的是要意识到正在加载的页面中已经发生了 ready 事件。这意味着 ready 处理程序中包含的任何代码都将立即触发。如果代码位于远程文件中的 html 之前，它将在 DOM 中存在相应的 html 元素之前触发...并且不会执行任何操作。

放置在远程文件中 html 之后的代码将起作用，因为它引用的 html 已经被处理