经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了:
<body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div> </body> <script> $(function(){ $('#btn').bind('click', function(event) { /* 在添加标签的同时给添加的标签绑定点击事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用 $('li').bind('click', function(event) { alert("haha"); ///根本不会触发这个方法 }); }) </script>
点击按钮,就会在d2中添加一个li标签,这个可以。
但是,如果这样在初始化时,用bind方法给将来要动态生成的li标签绑定方法是无效的,点击生成的li标签,没有任何反应。
因为bind方法只能给在执行它时已经存在的静态标签jq对象绑定事件,对未来动态添加的标签是无效的。
这时,可以有几种方法来解决这个问题:
方法一:
<body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 动态生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn"/> </div> </body> <script> $(function() { ///点击按钮,给d2动态添加标签 $('#btn').bind('click', function() { /* 在添加标签的同时给添加的标签绑定点击事件 */ $("<li onclick='show()'>Hello</li>").appendTo("#d2"); }); }) function show() { alert($(this).text());///这样打印出的是空的,没有任何东西,但是方法是会触发的(不能这样打印自己) alert("哈哈"); } </script>
这种方法是在动态拼接时就拼接好js原生的要触发的事件,然后把事件方法定义在script标签中。这种方法可以触发li的点击事件。但是如果要用alert($(this).text())这种打印标签自己本身信息的东西的方法,是没有任何结果显示的。这个即使是静态的标签打印自己也是不会有显示的。
要解决这个问题,可以用下面两种方法。
方法二:
<body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn"/> </div> </body> <script> $(function(){ $('#btn').bind('click', function(event) { /* 在添加标签的同时给添加的标签绑定点击事件 */ $("<li>Hello</li>").appendTo("#d2").bind('click', function() { /* 显示标签的内容 */ alert($(this).text()); ///这种方式也可以正常打印出 hello }); }); }) </script>
这种方式是可以解决上面问题的。虽然它用的也是bind方法,但是注意,它是先有目的标签对象然后才调用的bind方法,所以也是好用的。而且它居然可以正常打印自己的信息,非常厉害。
方法三:
<body> <!-- 下面是用纯动态方式生成标签 --> <div id="d1"> 测试静态标签的绑定方法 </div> <br /> <div id="d2"> 动态生成a标签的位置 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div> </body> <script> $(function(){ $('#btn').bind('click', function() { /* 在添加标签的同时给添加的标签绑定点击事件 */ $("<li>Hello</li>").appendTo("#d2"); }); ///bind方法对于动态添加的标签不好使,只对已经存在的静态标签好用 ///用live方法才好用 $('li').live('click', function() { alert($(this).text());///注意,用live还可以这样写,结果是正常的 alert("haha"); }); ///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素) $('#d1').live('click', function() {///对于静态和动态创建的标签都好使 alert($(this).text());///注意,用live还可以这样写,结果是正常的.这是非常重要的 alert("haha"); }); }) </script>
这种就是用jq的非常好用的既可以动态也可以静态绑定现在或者未来各种标签的live方法。而且它最神奇的地方是也能 打印自己。我靠,太牛了。以后就用它了。
暂时还没发现这个live方法有什么弱点啊!
新手一枚,欢迎大神指正各种错误!
以上这篇jquery 给动态生成的标签绑定事件的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]