JQuery 动态生成元素添加点击事件
生活随笔
收集整理的這篇文章主要介紹了
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
<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 动态生成元素添加点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抢你妹怎么玩？操作玩法及技能游戏全攻略
- 下一篇： 口袋妖怪白金光攻略，白金光图文攻略中文汉