jq给动态生成的标签绑定事件的几种方法
经常遇到给动态生成的标签绑定事件不好用，自己简单测试总结了下，结论如下了：
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方法有什么弱点啊！
jq给动态生成的标签绑定事件的几种方法的更多相关文章
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- JQuery对于动态生成的标签绑定事件失效
JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操 ...
- Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- JqueryMobile动态生成listView并实现刷新的两种方法
本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jQuery:如何给动态生成的元素绑定事件？
jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而, ...
- 用jQuery来绑定事件的3种方法和区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery中动态生成元素的绑定事件（坑死宝宝了）
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...
随机推荐
- more 可翻页查看（一页一页翻动）
命令解释 我们查看数据的时候,使用前面提到的nl与cat.tac等等,都是将文件内容一次性输出到屏幕上,看起来不是很方便,那我们就可以使用这个命令,一页一页查看,前面的数据不至于看不到. 命令说明 [ ...
- 那些你希望N年前就掌握的命令
这篇文章转载自黑客志,短短的一篇文章我找到了3个对我非常有用的技巧,在信息爆炸的今天,简直就跟捡宝似的,希望这些命令对你也有帮助. 有人在Reddit上发帖询问:有没有哪条命令是你希望自己在几年前就掌 ...
- Oauth2.0（六）：Resource Owner Password Credentials 授权和 Client Credentials 授权
这两种简称 Password 方式和 Client 方式吧,都只适用于应用是受信任的场景.一个典型的例子是同一个企业内部的不同产品要使用本企业的 Oauth2.0 体系.在有些情况下,产品希望能够定制 ...
- jieba库及wordcloud库的使用
知识内容: 1.jieba库的使用 2.wordcloud库的使用 参考资料: https://github.com/fxsjy/jieba https://blog.csdn.net/fontthr ...
- awk(gawk)
awk,逐行处理文本内容.Linux里的awk其实是“gawk”. 使用格式: awk [选项] '模式匹配 {命令 命令参数}' file1, file2, …… 支持的选项 说明 -f progr ...
- linux 使用随笔
目录:1,ab命令 一,ab命令 ab网站压力测试命令的参数.输出结果的中文注解 ab命令是Apache的Web服务器的性能测试工具,它可以测试安装Web服务器每秒种处理的HTTP请求. 来自: ht ...
- 解决python执行linux查看文件命令后，因为^@特殊符号导致部分内容不显示的问题
问题现象 文件a的内容如下: 查看第3行到第5行的内容:sed -n '3,5p' /tmp/test/a 可见在命令行执行,是没有问题的. 在python中使用paramiko模块执行linux命令 ...
- leetcode54
class Solution { public: vector<int> spiralOrder(vector<vector<int>>& matrix) ...
- UI5-文档-4.27-Mock Server Configuration
我们只是在一个真实的服务上运行我们的应用程序,但是对于开发和测试我们的应用程序,我们不希望依赖于“真实”服务的可用性,或者在数据服务所在的系统上增加额外的负载. 这个系统就是所谓的后端系统,我们现在将 ...
- Qt 的事件
一个事件由一个特定的QEvent子类来表示,如QMouseEvent.QKeyEvent 处理一个事件的方法: 方法一:重新实现部件的paintEvent.mousePressEvent等事件处理函数 ...