页面代码
<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_image
css样式的子元素,添加点击事件。
方法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
样式,…