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

Question

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

通过 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 元素，但我无法访问它的属性。我已将 '#div1 img' 更改为 '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

我建议使用$(document).on("click" , "" , function() {});

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

Answer 4

您需要在父 div 上有点击事件，以便将点击事件委托给不属于 DOM 的子元素，请在事件委托中查看link

试试这个：

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