页面代码

<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

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

为每个元素添加点击事件

方法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>

官方做法

$(document).on("click",'#lyysb a',function(){if(!$(this).hasClass('cur')){$(this).addClass('cur');} else {$(this).removeClass('cur');}
});

点击添加cur样式，再次点击删除cur样式。再再次点击添加cur样式，…

JQuery 动态生成元素添加点击事件相关推荐

为未来元素添加点击事件的两种写法
哈哈哈,小七来了,对于经常搬砖撸代码的猴子们,一定会遇到给好多li(死的还是动态字符串拼接生成的(对未来元素添加不到事件的看之前写的事件委托))添加点击事件第一种: var index=0; for ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）
目录场景分析解决场景使用 ion-select 组件时,点击下拉图标点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
jq遍历循环，给每个元素添加点击事件，并返回当前元素的索引值（闭包问题）
jq循环绑定点击事件造成闭包问题需求:给每个带有tab类名的元素点击点击事件,点击时可以添加active类名,(用于样式切换),而且还需要返回当前元素对应的索引值: 方法一(出现闭包) 先引入jq ...
jquery 动态拼接数据设置点击事件
//获取总数据 $.ajax({type: "post", //请求方式contentType: "application/json",url:"&q ...
通过js动态为标签元素添加点击事件
最近遇到了,就研究了下,总结了下: 我所知道的有如下几种方式: var submitSpan = document.getElementById("submitSpan");第一种 ...
elementUI使用之table表格如何给行元素添加点击事件
官方文档提供的event事件在代码中绑定事件在methods中写方法好了,这样就可以实现了.
css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式  <div class="father"></div><style ...

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

页面代码

方法1

方法2

方法3

方法4

官方做法

JQuery 动态生成元素添加点击事件相关推荐

最新文章

热门文章