Javascript在通过XMLHttpRequest加载时不执行，但在使用jQuery.load加载时执行_Javascript_Jquery_Html_Ajax_Xmlhttprequest

Javascript在通过XMLHttpRequest加载时不执行，但在使用jQuery.load加载时执行

javascript jquery html ajax

Javascript在通过XMLHttpRequest加载时不执行，但在使用jQuery.load加载时执行,javascript,jquery,html,ajax,xmlhttprequest,Javascript,Jquery,Html,Ajax,Xmlhttprequest,在将脚本转换为不需要jQuery时，我发现如果通过XMLHttpRequest加载我的内容（包含html和javascript的部分html页面），部分页面中的javascript将无法工作。但是，如果我使用jQuery.load加载分部代码，它确实可以工作我试着深入研究jQuery的load函数，看看它是否做了什么特别的事情，但没有任何东西跳出来。几天来，我一直把头撞在墙上，寻找答案，但都没有结果我做错了什么/如何让它像jQuery.load加载时那样工作编辑我通过从片段中的html中

在将脚本转换为不需要jQuery时，我发现如果通过XMLHttpRequest加载我的内容（包含html和javascript的部分html页面），部分页面中的javascript将无法工作。但是，如果我使用jQuery.load加载分部代码，它确实可以工作

我试着深入研究jQuery的load函数，看看它是否做了什么特别的事情，但没有任何东西跳出来。几天来，我一直把头撞在墙上，寻找答案，但都没有结果

我做错了什么/如何让它像jQuery.load加载时那样工作

编辑我通过从片段中的html中分离出我的javascript，并使用此处建议的技术加载javascript，从而使XMLHttpRequest方法能够工作：。但是，这仍然不能解释jQuery.load为什么工作jQuery是否会临时解析HTML，并对其加载的内容中找到的任何脚本执行相同的操作？

我用下面的代码设置了一个plunker（），演示了这个问题。注意：一旦用jQuery加载片段，它将继续工作，并且必须重新启动plunk，XMLHttpRequest方法才能再次失败

index.html:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>

  <h3>Buttons</h3>  
    <div>
      <input type="button" value="Load with XMLHttpRequest" onclick="loadXMLDoc('ajaxContentDiv', 'fragmentToLoad.html');">  (Links do not work if loaded this way... Script from fragmentToLoad.html not loaded in DOM?) <br/><br/>
      <input type="button" value="Load with JQuery" onclick="jQuery('#ajaxContentDiv').load('fragmentToLoad.html');">  (Links will work if loaded this way)
    </div>
<br/>
<br/>
<br/>
<div id="ajaxContentDiv">Content will load here...</div>

  </body>

</html>

function loadXMLDoc(targetDivName, url) {

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          if (xmlhttp.status == 200) {
              document.getElementById(targetDivName).innerHTML = xmlhttp.responseText;
          }
      }
  };
  xmlhttp.send();
}

<div id="divToBeUpdated">
  <span id="stringBox">String here</span>
</div>
<br/>
<h3>Links</h3>
<div>
  <a href="#" onclick="updateDiv('Hello World 1');">Link 1</a><br>
  <a href="#" onclick="updateDiv('Hello World 2');">Link 2</a><br>
  <a href="#" onclick="updateDiv('Hello World 3');">Link 3</a><br>
</div>

<script>
  function updateDiv(string){
    var stringBox = document.getElementById('stringBox');
    stringBox.innerHTML = string;
  }
</script>

fragmentToLoad.html:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>

  <h3>Buttons</h3>  
    <div>
      <input type="button" value="Load with XMLHttpRequest" onclick="loadXMLDoc('ajaxContentDiv', 'fragmentToLoad.html');">  (Links do not work if loaded this way... Script from fragmentToLoad.html not loaded in DOM?) <br/><br/>
      <input type="button" value="Load with JQuery" onclick="jQuery('#ajaxContentDiv').load('fragmentToLoad.html');">  (Links will work if loaded this way)
    </div>
<br/>
<br/>
<br/>
<div id="ajaxContentDiv">Content will load here...</div>

  </body>

</html>

function loadXMLDoc(targetDivName, url) {

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          if (xmlhttp.status == 200) {
              document.getElementById(targetDivName).innerHTML = xmlhttp.responseText;
          }
      }
  };
  xmlhttp.send();
}

<div id="divToBeUpdated">
  <span id="stringBox">String here</span>
</div>
<br/>
<h3>Links</h3>
<div>
  <a href="#" onclick="updateDiv('Hello World 1');">Link 1</a><br>
  <a href="#" onclick="updateDiv('Hello World 2');">Link 2</a><br>
  <a href="#" onclick="updateDiv('Hello World 3');">Link 3</a><br>
</div>

<script>
  function updateDiv(string){
    var stringBox = document.getElementById('stringBox');
    stringBox.innerHTML = string;
  }
</script>


系在这里


链接






函数updateDiv（字符串）{
var stringBox=document.getElementById（'stringBox'）；
stringBox.innerHTML=string；
}

您可以使用单个

.html

文件，通过拆分

html

内容，您就走上了正确的轨道-尽管您也可以拆分单个文件的

html

内容，而不是请求两个文件@Barmar在这里解释了jQuery的

.load（）

方法的功能

script.js

function loadXMLDoc(targetDivName, url) {

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
      if (xmlhttp.status == 200) {
        // create a `div` elemenent, append response to `div` element
        // get specific elements by `id`, append `script` element to `document.body`
        var content = document.createElement("div");
        content.innerHTML = xmlhttp.responseText
        var div = content.querySelector("#htmlContent");
        var contentScript = content.querySelector("#contentScript");
        var script = document.createElement("script");
        script.textContent = contentScript.textContent;
        document.getElementById(targetDivName).innerHTML = div.innerHTML;
        document.body.appendChild(script);
      }
    }
  };
  xmlhttp.send();
}

fragmentToLoad.html

<div id="htmlContent">
  <div id="divToBeUpdated">
    <span id="stringBox">String here</span>
  </div>
  <br/>
  <h3>Links</h3>
  <div class="links">
    <a href="#">Link 1</a>
    <br>
    <a href="#">Link 2</a>
    <br>
    <a href="#">Link 3</a>
    <br>
  </div>
</div>
<script type="text/javascript" id="contentScript">
  function updateDiv(string) {
    var stringBox = document.getElementById('stringBox');
    stringBox.innerHTML = string;
  }
  // attach `click` event to `.link a` elements here
  var links = document.querySelectorAll(".links a");
  for (var i = 0; i < links.length; i++) {
    (function(link, i) {
      console.log(i)
      link.addEventListener("click", function(e) {
        e.preventDefault();
        updateDiv("Hello World " + i)
      })
    })(links[i], i)
  }
</script>


系在这里


链接






函数updateDiv（字符串）{
var stringBox=document.getElementById（'stringBox'）；
stringBox.innerHTML=string；
}
//将'click'事件附加到'。在此处链接'a'元素
var links=document.queryselectoral（“.links a”）；
对于（变量i=0；i


加载document
时，在全局属性事件的html
中未定义plnkr
updateDiv
函数。@Barmar OP的问题比链接的问题和答案稍微复杂一些。也就是说，将fragmentToLoad.html
中的html
元素与fragmentToLoad.html
中的
元素分开；此外，OP需要将单击事件侦听器附加到每个元素，链接的问题没有解决该问题。从这里的角度来看，链接的问题不是“完全重复”。jQuery解析HTML并搜索
标记，并模拟它们本身，因为分配给。innerHTML
不会执行脚本。OP试图不使用jQuery。链接的问题是如何将单击事件附加到文档的动态
元素的？在.load（）
函数中没有任何内容跳出来的原因是它是在.html（）
函数中完成的.load（）
只是执行AJAX调用然后对结果使用.html（）
的快捷方式。查找执行
模拟的实际代码可能很困难，因为它被隐藏了很深。感谢您提供的示例，并指出通过使用选择器，内容仍然可以存在于单个文档中。在我的最后一段代码中，我仍然能够使用onclick=“updateDiv（..），而不是连接到链接的事件处理程序。@John对于深入研究“好的做法”、“坏的做法”犹豫不决"估计；fwiw，请参阅。当前问题解决了吗？好的一点。HTML/Javascript不是我的故乡，因此这些天来我与一些最佳实践失去了联系。您提出的方法唯一的问题是，我的实际代码将在音频标记上设置src元素，并显示要播放的音频的标题一个div。您如何转换这些值：和@John您可以将值存储在数组中var arr=[['/AudioFile321.mp3'，'audiofile 321']，['/HelloWorld123.mp3'，'HelloWorld123']]
，将i
处的数组元素传递给for
循环中立即调用的函数表达式，然后在事件处理程序中调用updateDiv时使用function.prototype.apply（）
（函数（链接，数组）{link.addEventListener（“单击”，函数（e）{e.preventDefault（）；updateDiv.apply（null，array）}）（links[i]，arr[i]）
。