如何在ajax中使用动态添加的HTML类

how to use a dynamically added html class inside ajax

本文关键字：添加 动态 HTML ajax      更新时间：2023-09-26

我正在尝试从页面上的文件夹中拉出所有图像。然后我添加了html类的'。在ajax中针对jquery元素的Append '函数。现在我想在ajax之外的另一个函数中使用这个类。但是这个类似乎是本地的，因此没有在ajax外部定义。你能告诉我怎么解决这个问题吗?我的代码- 

/* html code */
<body>
  <div id="imageWrapper">
      <div id="spanImage"></div>
   </div>
<script>
var folder = "images/";
  $.ajax({
      url : folder,
      success: function (data) {
          $(data).find("a").attr("href", function (i, val) {
              if( val.match(/'.(jpe?g|png|gif)$/) ) {
                  $("#spanImage").append( "<img src='"+ folder + val +"' class='imageThumbnails'>");
              }
          });
      }
  });
/* I have added class = 'imageThumbnails' dynamically to each image appended. Now I would like to use the class to work on individual image to make them pop up
*/
$(".imageThumbnails").click(function() {...}
</script>
</body>

这个不能工作，因为'imageThumbnails'没有被系统识别为一个有效的类。你能帮帮我吗?

你可以使用下面的代码来绑定事件

$(document).on("click",".imageThumbnails",function() {...});

委托。将监听器附加到它的父类上，并让事件冒泡。

$("body").on('click', '.imageThumbnails', function() {...}

参见它的工作。您没有关闭点击功能。

$(document).ready(function () {
$(".imageThumbnails").click(function() {...})
})


(function () {
  $('body').append('<img class="imageThumbnails" src="some.png" alt="submit" >')
  
  })()
$(document).ready(function () {
$('.imageThumbnails').click(function () {
  
  console.log('work');
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关文章：