在Ajax调用后，getElementById不起作用 [英] getElementById does not work after ajax call

问题描述

我正在开发一个使用javascript / ajax的Web应用程序。

问题是，在我的应用程序（一种社交网络）中，我需要阅读关于用户的信息（数据库中的帖子）。为此，我使用一个PHP专用服务来处理与数据库的交互。该服务返回格式化为主页面的HTML。

现在，我使用此服务进行AJAX调用，以将HTML插入到我的页面中。问题是，当我尝试从JavaScript注入的HTML中获取元素时：

  document.getElementById（'commentsArea_xxx'） .innerHTML = xmlhttp.responseText; 
  

getElementById 返回 null 。

我认为问题在于AJAX调用后浏览器不更新文档，所以'commentsArea_xxx'不存在在这份文件中！

我如何解决这个问题？

这是我的代码：

  function moreComments（id）{
 var footerIcon = document.getElementById（'footer'）; 
 footerIcon.innerHTML =< div style ='text-align：center;'>< img src ='images / home_selected.png'onClick ='loadHome（）'/>< img id ='cameraButton'src ='images / camera.png'/>< img src ='images / list.png'onClick ='loadMyVideo（）'/>< / div>; 
 pageOld = pageCurrent; 
 pageCurrent = 0; 
 document.getElementById（ajaxContent）。innerHTML =< div id ='wrapper'style ='top：95px;'>< div id ='scroller'>< ul id =' thelist'>< li style ='text-align：center;'>< img src ='images / loading.gif'style ='text-align：center;'>< / li>< / UL>< / DIV>< / DIV>中; 
 var xmlhttp; 
 if（window.XMLHttpRequest）{
 xmlhttp = new XMLHttpRequest（）; 
} 
 else {
 xmlhttp = new ActiveXObject（Microsoft.XMLHTTP）; 
 
 xmlhttp.onreadystatechange = function（）{
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）{
 document.getElementById（ commentsArea _+ ID）.innerHTML = xmlhttp.responseText; 
 loaded（）; 
 me（）; 
 setTimeout（function（）{myScroll.refresh（）;}，0）; 
} 
} 
 xmlhttp.open（GET，home_more.php？id =+ id，true）; 
 xmlhttp.send（）; 
} 
  

解决方案

/ b>

  $（'body'）。ajaxComplete（function（）{
 document.getElementById（'commentsArea_xxx'）。innerHTML = xmlhttp.responseText; 
}）; 
  

这将在每次ajax调用后执行。

更新：
如果您尚未将元素添加到DOM，请通过@TJ Crowder的答案。

I'm developing a web application using javascript / ajax .

The problem is that in my application (a kind of social network) I need to read information about users (posts in a database). To do this I use a PHP dedicated service with the interactions with database. The service returns HTML formatted for the main page.

Now, I use this service with an AJAX call to bring the HTML and injects it into my page. The problem is that when I try to get an element from the injected HTML with javascript:

document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;

getElementById returns null.

I think the problem is that after the AJAX call the browser does not update the document and so 'commentsArea_xxx' doesn't exist in the document!

How do I fix this problem?

This is my code:

function moreComments(id){
        var footerIcon = document.getElementById('footer');
            footerIcon.innerHTML="<div style='text-align:center;'><img src='images/home_selected.png' onClick='loadHome()'/><img id='cameraButton' src='images/camera.png'/><img src='images/list.png' onClick='loadMyVideo()'/></div>";
            pageOld=pageCurrent;
            pageCurrent=0;
            document.getElementById("ajaxContent").innerHTML="<div id='wrapper' style='top:95px;'><div id='scroller'><ul id='thelist'><li style='text-align:center;'><img src='images/loading.gif' style='text-align:center;'></li></ul></div></div>";
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("commentsArea_"+id).innerHTML=xmlhttp.responseText;
                    loaded();
                    me();
                    setTimeout(function () {myScroll.refresh();}, 0);
                }
            }
            xmlhttp.open("GET","home_more.php?id="+id,true);
            xmlhttp.send();
    } 

解决方案

This should do it :

$('body').ajaxComplete(function () {
        document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;
 });

This will be executed after every ajax call.

UPDATE: If you have not added the element to the DOM go through @T.J Crowder's answer.

这篇关于在Ajax调用后，getElementById不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！