1500字范文 > JQuery 动态生成元素添加点击事件

JQuery 动态生成元素添加点击事件

时间：2020-01-29 09:44:00

相关推荐

JQuery 动态生成元素添加点击事件

页面代码

<html>...<body><div id="divBox"></div><script>$(function(){$("#divBox").append("<img class='preview_image' src='/img/preview1.jpg' />");$("#divBox").append("<img class='preview_image' src='/img/preview2.jpg' />");$("#divBox").append("<img class='preview_image' src='/img/preview3.jpg' />");});</script></body></html>

预览效果：

需求：

给3个图片均加上点击事件

方法1

<script>$(function(){var target = $("#divBox");target .append("<img class='preview_image' src='/img/preview1.jpg' />");target .append("<img class='preview_image' src='/img/preview2.jpg' />");target .append("<img class='preview_image' src='/img/preview3.jpg' />");target.on("click", ".preview_image", function(){console.log(this); // 输出所点击的img});});</script>

target.on("click", ".preview_image", function(){...}：taget元素的子元素，且包含.preview_imagecss样式的子元素，添加点击事件。

方法2

<script>$(function(){var target = $("#divBox");target .append("<img class='preview_image' src='/img/preview1.jpg' />");target .append("<img class='preview_image' src='/img/preview2.jpg' />");target .append("<img class='preview_image' src='/img/preview3.jpg' />");target.find(".preview_image").click(function(){console.log(this); // 输出所点击的img});});</script>

target是jquery对象target.find()中，find方法的作用：查找target元素的后代元素；find方法的参数：与JQuery选择器的表达式一致。

方法3

为每个元素添加点击事件

方法4

<script>$(function(){var imgBox = $("<div class='preview_image_box'></div>");imgBox.append("<img class='preview_image' src='/img/preview1.jpg' />");imgBox.append("<img class='preview_image' src='/img/preview2.jpg' />");imgBox.append("<img class='preview_image' src='/img/preview3.jpg' />");imgBox.find(".preview_image").click(function(){console.log(this); // 输出所点击的img});var target = $("#divBox");target.append(imgBox);});</script>