如何使 javascript 与使用 ajax 加载的 htm 一起工作答案

【问题标题】：how do I make javascript work with htm l loaded using ajax如何使 javascript 与使用 ajax 加载的 htm 一起工作
【发布时间】：2015-10-06 19:43:00
【问题描述】：

这应该很简单，但我无法理解它，如果有任何帮助，我将不胜感激。

我的 php 主页底部有一些 JavaScript。这个脚本所做的只是它在加载窗口时调用一个函数，并回显导航，这非常有效。

问题是当 nav.已填充，我在主页上的 javascript 无法与之交互。

//Ajax that loads the nav
window.onload = function(){
 function loadContent(where,what) {

if (window.XMLHttpRequest){
  var xmlhttp = new XMLHttpRequest();
} else { 
  var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
}

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    document.getElementById(where).innerHTML = xmlhttp.responseText;
  }
}

    xmlhttp.open('GET', what,true);
    xmlhttp.send();
};

//the nav function is called directly under it

loadContent('navigator','include/navigation.php');

//after the above is loaded, any javascript written to call an element from the loaded html does not work.

};

navigation.php 只包含一些要回显的 html，这也很有效。

echo'
<ul class="nav navbar-nav navbar-right animate animated fadeInDown">
  <li class="nav-item"><a href="#">Explore</a></li>
  <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"  aria-expanded="false">Select Country<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Worldwide</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">UK</a></li>
      <li><a href="#">Nigeria</a></li>
      <li><a href="#">Ghana</a></li>
      <li><a href="#">Kenya</a></li>
      <li><a href="#">South Africa</a></li>
    </ul>
  </li>
  <li class="nav-item"><a href="#">Calender</a></li>
  <li class="nav-item"><a href="#" data-toggle="modal" data-target="#login"                 id="loginbutton">Log In</a></li>
  <li class="nav-item"><a href="#" id="logout">Log Out</a></li>

现在我的困境是上面的内容已经加载了。我在 window.onload 函数中编写的任何 JavaScript 都不适用于上述任何元素。我会寻求任何帮助。请使用香草js，所以没有jquery。谢谢

【问题讨论】：

那是因为从您的 ajax 调用加载的 html 不在 DOM 元素中。您需要做的是从其父元素开始搜索元素，例如：$(body).on ('click', '.nav-item', function() {});
Making jquery .on function work with AJAX loaded content的可能重复
你可以使用监听器。这样，它将继续寻找页面加载后添加的任何元素
为什么我们不能把 jQuery 排除在外，至少有一个 js 问题
我能得到一个纯 js 的例子，而不是 jquery。谢谢

标签： javascript php html ajax

【解决方案1】：

我可以看到很多帖子推荐xmlhttp.readyState == 4 && xmlhttp.status == 200。但经过大量试验，它未能可靠地加载内容。然后使用萤火虫，我发现显示内容时总是存在 OK 标志，所以我尝试了xhr.statusText === "OK"，它每次都可靠地工作。然后转到 w3 网站，我发现只有在加载内容后才会给出 OK 标志，就像 xmlhttp.readyState == 4 && xmlhttp.status == 200 一样。在 MSDN 论坛上，我检查了他们的方法，他们也使用了xhr.statusText === "OK"。我不知道为什么，但这对我来说最有效。这里还有一些代码：

var d=document.getElementById("clicks");
 
var ajaxCall = function() {
    var d=document.getElementById("clicks");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://localhost/JSON/text.txt", true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if(xhr.statusText === "OK") {
        d.innerHTML = xhr.response;
        } else {
        d.innerHTML = "No";
        }
    }


    };

   d.addEventListener("click",ajaxCall,false);

【讨论】：

谢谢，但这里的问题是没有加载内容。内容加载得很好，但在加载之后。我不能在代码的那部分使用 javascript
真正的问题不在于javascript，而在于如何加载内容。您的 php 包含与 js 一起提供。因此您的 js 找不到要交互的元素。永远记住，对于 DOM 操作来说，存在 html 很重要。除非 php include 转换为 html 代码，否则任何 js 在它加载之前都不会找到任何 DOM 内容。您可以尝试使用初始脚本标签延迟加载您的 js。
好的，既然已经创建了新元素，我该如何让javascript与之交互。 window.onload 不起作用
您应该通过与您的 ajax 而不是页面绑定的脚本来应用 js。这将清除脚本和浏览器播放的优先游戏。或者，在您的第一个 ajax 调用之后调用另一个 ajax。

【解决方案2】：

$.ajax({
    method: "POST", //GET/POST
    url: "handler.php" //URL where you will check everything or give your response
    data: {varName: $variable }
}).done(function(data){
    $("div").append(data); //Puts data in div
});

这就是 AJAX 请求的工作原理！！！

【讨论】：

谢谢，但我更喜欢使用纯 js 而不是 jquery。请问我能得到一个解决方案吗？