Question

我想使用ajax调用从目录加载所有图像，并在添加到html后接受一个图像。我已成功加载所有图像。但我的问题是，在jQuery中插入后，我无法在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元素，但我无法访问其属性。我已将“＃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

您无法在加载脚本时不存在的元素上绑定click事件。你可以改变这个：

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

到此：

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

Answer 3

您需要在父div上设置click事件才能将点击事件委托给不属于DOM的子项，请在事件委派<{p>>上查看link

请改为尝试：

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

Answer 4

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

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

在ajax加载数据后获取有关jquery的数据

4 个答案: