我该如何让JavaScript与htm l一起使用ajax加载

这应该是非常直接的，但我绝对不能把我的头围绕它，如果我会感激任何帮助。我该如何让JavaScript与htm l一起使用ajax加载

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

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

来源

2015-10-06 Mueyiwa Moses Ikomi

这是因为从你的Ajax调用加载HTML是不是在DOM元素..你需要做的是开始寻找的元素，其父母，例如：$（body）.on（'click'，'.nav-item'，function（）{}）; – Naruto

[使jQuery的.on函数与AJAX加载内容一起工作]的可能的重复（http://stackoverflow.com/questions/10416689/making-jquery-on-function-work-with-ajax-loaded-content） – Naruto

你coul使用一个监听器。这样它会继续寻找页面加载后添加的任何元素 – Crecket

我可以看到很多帖子推荐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);

来源

2015-10-06 11:43:00

谢谢，但这里的问题是不加载内容。内容加载得很好，但在它之后。我无法在代码 –

的该部分上使用JavaScript真正的问题不在于JavaScript，而在于如何加载内容。您的php包含与js一起提供。因此您的js找不到可与之交互的元素。请始终记住，对于DOM操作来说，重要的是html。除非PHP包含转换为html代码，否则任何js在加载之前都不会为其找到任何DOM内容。你可以尝试使用初始脚本标签来加载你的js。 –

好的，现在新元素已经创建好了，我该如何让javascript与它交互。 window.onload does not work –

$.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请求如何工作！

来源

2015-10-06 11:18:52

谢谢，但我更喜欢使用纯js而不是jquery。我可以得到一个解决方案，我香草pls？ –

我该如何让JavaScript与htm l一起使用ajax加载

回答

相关问题