Question

因为我有一个父div，我要在其中添加动态创建的div。动态创建的div具有一个名为“单项”的类，该类很关键，因为它已在我的外部链接分页脚本中调用（链接）。我已经通过创建静态div进行了尝试，并且外部分页脚本运行正常。但是，如果不是动态创建div的情况。

我正在从Ajax生成图像，并且图像地址保存在数据库中。

所以我尝试了很多解决方案，例如：

我检查了我是否未调用错误的类以及脚本未正确链接。
我也尝试过静态创建div，然后使其正常工作，并且分页代码也正常工作。
但是当div动态生成时，分页代码停止工作。

<script>
      function loadDoc() {
        
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET","product_design", true);
          xhttp.send();
              
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              var data = JSON.parse(xhttp.responseText);
            // document.getElementById("demo").innerHTML=data[0].product_name; 
               Image1 =document.getElementById("poster").innerHTML=  "<img onclick='onClick(this)' class='modal-hover-opacity' src='"+data[0].image_address+"' style=' width:100%; ' />";
               Image2 =document.getElementById("poster1").innerHTML= "<img src='"+data[1].image_address+"' style=' width:100%; ' />";
               Image3 =document.getElementById("poster2").innerHTML= "<img src='"+data[2].image_address+"' style=' width:100%; ' />";
               Image4 =document.getElementById("poster3").innerHTML= "<img src='"+data[3].image_address+"' style=' width:100%; ' />";
               Image5 =document.getElementById("poster4").innerHTML= "<img src='"+data[4].image_address+"' style=' width:100%; ' />";
               Image6 =document.getElementById("poster5").innerHTML= "<img src='"+data[5].image_address+"' style=' width:100%; ' />";
              }
          }
      }
      
      
      
       
      </script>

  <div class="pagecontainer">
    <div class="single-item"> <div id="poster"> </div> </div>
    <div class="single-item"> <div id="poster1"> </div> </div>
    <div class="single-item"> <div id="poster2"> </div> </div>
    <div class="single-item"> <div id="poster3"> </div> </div>
    <div class="single-item"> <div id="poster4"> </div> </div>
    <div class="single-item"> <div id="poster5"> </div> </div>
    <div class="single-item"> <div id="poster6"></div></div>
    </div>

预期的结果应显示分页代码，图像在每个页面中分为6部分，但不会在我动态创建div的代码中显示。唯一的原因是我的脚本没有获取类-在其上调用分页的单项。

这是我通过其动态生成div的代码，但脚本未在此处调用分页代码的class =“ single-item”上触发。

<script>



function loadDoc() {
    var count=0;
    var gin = 0;
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET","product_design", true);
          xhttp.send();
              
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              var data = JSON.parse(xhttp.responseText);
                 for (index = 0; index < data.length; index++) {
                
                var whole = document.getElementsByClassName("pagecontainer")[0];
                var single = document.createElement("div");
                     single.className = "single-item";
                     single.id = "HI";
                     whole.appendChild(single);
                     
                     var doubles = document.createElement("div");
                     doubles.id = "pos"+index;
                     single.appendChild(doubles);
                     
                
               	
               	
var paru = document.getElementById("pos"+ count);
paru.innerHTML = "<img src='"+data[index].image_address+"' style=' width:100%; ' />";
               
                count=count+1;	
            } 
        }    	
    }      	
}      	

</script>

为什么JS文件未链接到我创建的动态div（具有类）？

0 个答案: