Question

我有一个页面，我使用ajax获取目录中的所有图像并将其附加到正文。同样在这个ajax调用中，我为每个创建的图像分配了一个ID。

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

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

编辑：

这是我的ajax调用，用于获取图像并将其附加到div。

$(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);
    }
});

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

{{1}}

console logging idName显示我有正确的ID，但变量abyssalScepter为null。另外，检查实时DOM会显示所有img HTML及其属性和属性。

Answer 1

您的问题应该是使用Async函数来获取图像，在您的代码中，查找图像的过程应该在您从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是具有您需要执行的逻辑的函数。

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

1 个答案: