在ajax加载数据后获取jquery上的数据

Question

我希望使用ajax调用从目录加载所有图像，并在将其添加到html后接受。我已经成功地加载了所有的图像。但我的问题是，在jQuery中插入属性后，无法访问它的属性。

如何在通过jQuery ajax调用添加图像属性之后访问它。

用于访问图像src的jQuery代码是

     $("button").click(function(){
       $("#div1").load("demo.php");
     });
      $("#div1 img").click(function(){
       console.log($(this).attr("src"));
      });        

我的html是：

       <div id="div1"></div>
       <button>Click Here</button>

我的demo.php是

        <?php
       $directory = /path/to/folder/;
       $images = glob($directory . "*.jpg");
       foreach($images as $image)
       {
     echo "<img class='imgr' src='$image'/>";
     }
      ?>

我能够将图像加载到div1元素，但无法访问它的属性。我把“#DIV1IMG”改为“img”和“.imgr”，但没有运气。

Answer 1

这是因为数据是动态加载的。

改变；

 $("#div1 img").click(function(){
   console.log($(this).attr("src"));
}); 

至

$( "#div1" ).on( "click", "img", function() {
   console.log($(this).attr("src"));
});

Answer 2

无法绑定在加载脚本时不存在的元素上的单击事件。您可以改变这种情况：

$("#div1 img").click(function(){
   console.log($(this).attr("src"));
});

对此：

$('#div1').on('click', "img", function(){
   console.log($(this).attr("src"));
});

Answer 3

您需要单击父div上的事件，以便将单击事件委托给尚未成为DOM一部分的子事件，请在事件委托上检查此链接。

试一试：

  $("#div1").on('click', 'img', function(){
     console.log($(this).attr("src"));
  });