获取由javascript/ajax创建的元素的ID

我有一个页面，我使用ajax获取目录中的所有图像并将其添加到主体。同样在这个ajax调用中，我为每个创建的图像分配了一个ID。获取由javascript/ajax创建的元素的ID

但是，当我在浏览器中查看页面源时，不会显示图像的HTML。这会产生一个问题，我无法通过ID获取这些图像元素，因为HTML代码没有加载页面。当试图使用document.getElementById（“其中一个图像ID”）时，我得到一个TypeError，指出该var为null。

有没有办法单独获取这些元素？如果没有，是否有更好的方法来创建这些图像，我可以访问它们的属性和属性？

编辑：

这是我的Ajax调用来获取图像，并将其附加到一个div。

var imgDir = "/items_img"; 
var extension = [".jpg", ".png"]; 

$.ajax({ 
    url:imgDir, 
    success:function(resp){ 
     $(resp).find("a:contains(" + extension[0] + "), a:contains(" + extension[1] + ")").each(function(){ 
      var sliced = this.href.substring(this.href.lastIndexOf("/")); 
      var idName = sliced.slice(1,-4); 

      $("#items").append("<img id='" + idName + "' class='items_icon' src='" + imgDir + sliced + "'>"); 
     }); 
    } 
});

然后在另一个外部js文件中我有这个。

$(document).ready(function(){ 

    var newImg = document.createElement("img"); 

    var itemDiv = document.getElementById("items_div"); 

    var abyssalScepter = document.getElementById("Abyssal_Scepter"); 

    abyssalScepter.onclick = function(){ 
     var iconDiv = document.createElement("div"); 
     iconDiv.className = "icon_div"; 
     itemDiv.appendChild(iconDiv); 
     newImg.src = "/items_img/" + abyssalScepter.id + ".png"; 
     iconDiv.appendChild(newImg); 
    } 
});

控制台日志记录idName显示我有正确的ID，但可变的abyssalScepter为null。还检查实时DOM显示所有的img HTML及其属性和属性。

来源

2017-01-08 Roger

也发布您的代码？针对实际问题。 –

使用Firebug（Firefox）或开发者控制台（Chrome）等实时DOM调试器。 'view source'不显示JS所做的更改。假设ID正确，'document.getElementById'将正常工作。尽管发布您的代码，以便其他人可以帮助您获得更完整的答案。 –

您的问题应该是使用异步函数来获取图像，在您的代码中，应该在您从Ajax调用创建图像之后并且仅在您创建图像之后才会查找图像的过程，因为如果在Ajax调用那些图像不存在。所以你可以做这样的事情：

$.ajax({ 
    url:imgDir, 
    success:function(resp){ 
     $(resp).find("a:contains(" + extension[0] + "), a:contains(" + extension[1] + ")").each(function(){ 
      var sliced = this.href.substring(this.href.lastIndexOf("/")); 
      var idName = sliced.slice(1,-4); 

      var img = $("#items").append("<img id='" + idName + "' class='items_icon' src='" + imgDir + sliced + "'>") 
      img.click(function(){ handleClick(img) }); 
     }); 
    } 
});

HandleClick是，你需要执行的逻辑功能。

来源

2017-01-08 11:58:07 damianfabian

如果我错了，请纠正我，但这会限制为每个img分配不同功能的能力。我解决了我的问题。幸运的是，我的网站的设计涉及一个标签，显示图像附加到的div。所以当我为选项卡创建一个onclick函数来加载外部js文件。不幸的是，我的解决方案不适用于每一种设计，所以仍然欢迎回答。在firefox“inspect”中查看“网络”，我可以看到外部js文件在所有图像被创建之前被加载，这是TypeError为空的原因。 – Roger

那么，你的问题是关于函数的错误，我只是给你一个解决你的问题，现在除了我看到你有一个设计问题是完全不同的这个问题。我认为你可以做的最好的事情就是创建一个新问题，提供关于你的问题的更多细节和完整的问题，因为我们都同意你在这个问题上的问题得到解决。 – damianfabian

获取由javascript/ajax创建的元素的ID

回答

相关问题