如何使javascript与使用ajax加载的html一起工作

how do I make javascript work with htm l loaded using ajax

本文关键字：加载 html 一起 工作 ajax 何使 javascript      更新时间：2023-09-26

这应该很直接，但我实在无法理解，如果有任何帮助，我将不胜感激。

我有php主页，底部有一些JavaScript。这个脚本所做的就是在加载窗口时调用一个函数，并与导航相呼应，这样做效果很好。

问题是，当导航。已填充，我在主页上的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。感谢

我可以看到很多推荐xmlhttp.readyState == 4 && xmlhttp.status == 200的帖子。但经过大量的试验，它未能可靠地加载内容。然后使用firebug，我发现在显示内容时总是会出现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);

$.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请求就是这样工作的！！！

相关文章：