獲取由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

回答

相關問題