动态生成数据后绑定事件
生活随笔
收集整理的這篇文章主要介紹了
动态生成数据后绑定事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>測試</title> 7 <script src="jquery-1.11.3.js"></script> 8 <script src="test1.js"></script> 9 </head> 10 11 <body> 12 <div id="hide"> 13 <div class="the-test"> 14 #test# 15 </div> 16 </div> 17 <div id="show"> 18 </div> 19 </body> 20 21 </html>?
javascript代碼：
1 /** 2 * 解決用replace方法動態生成多條數據時，對每條數據添加點擊事件需要更改div，此處可以通過js動態生成點擊事件而不更改div。 3 * 4 */ 5 6 $(function () { 7 init(); 8 }); 9 var init = function () { 10 11 var a = {}, 12 len = 0, 13 i = 0; 14 //測試數據 15 a = { 16 arr: ['test1', 'test2', 'test3'] 17 }; 18 //遍歷動態生成數據 19 for (i; i < a.arr.length; i++) { 20 var hide = $('#hide').html() 21 .replace(/#test#/g, a.arr[i]); 22 $('#show').html($('#show').html() + hide); 23 } 24 //動態添加點擊事件 25 $('body #hide').remove(); //移除#test#所在的div 26 27 /**************js的實現方式*************/ 28 // var nodes = $('.the-test'); 29 // for (i = 0, len = nodes.length; i < len; i++) { 30 // (function (i) { 31 // nodes[i].onclick = function () { 32 // alert(nodes.length); 33 // alert(nodes.eq(i).text()); //獲取點擊事件的內容 34 // }; 35 // }(i)); 36 // } 37 /**************jquery的實現方式********************/ 38 $("#show").delegate(".the-test","click",function(){ 39 console.log($(this).text()); 40 }); 41 };?
轉載于:https://www.cnblogs.com/rain318/p/6653465.html
總結
以上是生活随笔為你收集整理的动态生成数据后绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2、django管理网站
- 下一篇： linux wget 进度条多行的解决办