javascript/ajaxで作成されたIDのIDを取得する

Question

私はajaxを使ってディレクトリ内のすべての画像を取得し、それを本文に追加するページを持っています。このajax呼び出しでも、作成された各イメージのIDを割り当てました。

ただし、ブラウザでページソースを表示すると、画像のHTMLは表示されません。これは、HTMLコードがページにロードされていないため、これらの画像要素をIDで取得できない問題を引き起こします。 document.getElementById（「画像IDの1つ」）を使用しようとすると、varがnullであることを示すTypeErrorが返されます。

これらの要素を個別に取得する方法はありますか？そうでない場合は、私がそのプロパティと属性にアクセスできる場所でこれらのイメージを作成するより良い方法がありますか？

EDIT：

これは、画像を取得し、DIVにそれを追加するために私のAJAX呼び出しです。

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のプロパティと属性がすべて表示されます。

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は、実行する必要があるロジックを持つ関数です。