经常遇到给动态生成的标签绑定事件不好用，自己简单测试总结了下，结论如下了：

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给动态生成的标签绑定事件的几种方法的更多相关文章

  1. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  2. JQuery对于动态生成的标签绑定事件失效

    JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操 ...

  3. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  4. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  5. JqueryMobile动态生成listView并实现刷新的两种方法

    本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...

  6. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  7. jQuery:如何给动态生成的元素绑定事件？

    jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而, ...

  8. 用jQuery来绑定事件的3种方法和区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JQuery中动态生成元素的绑定事件（坑死宝宝了）

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

随机推荐

  1. Hadoop恢复namenode数据

    情景再现: 在修复hadoop集群某一个datanode无法启动的问题时,搜到有一个答案说要删除hdfs-site.xml中dfs.data.dir属性所配置的目录,再重新单独启动该datanode即 ...

  2. Spark数据本地性

    1.文件系统本地性 第一次运行时数据不在内存中,需要从HDFS上取,任务最好运行在数据所在的节点上: 2.内存本地性 第二次运行,数据已经在内存中,所有任务最好运行在该数据所在内存的节点上: 3.LR ...

  3. django 更新 模板语言

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 在Django的模板语言中按此语法使用:{{ 变量名 ...

  4. plsql 执行批量文件

    plsql 执行批量文件 plsql>command window @c:\a.sql;@c:\b.sql;@c:\c.sql;

  5. Spring boot @PropertySource, @ImportResource, @Bean

    @PropertySource:加载指定的配置文件 /** * 将配置文件中配置的每一个属性的值,映射到这个组件中 * @ConfigurationProperties:告诉SpringBoot将本类 ...

  6. Simple2D-16（音乐播放器）ImGui 库介绍

    什么是 ImGui IMGUI (Immediate Mode Graphical User interface),下载地址. ImGui 是一种比较新颖的 GUI 实现模式,适用于显示区域实时刷新的 ...

  7. Django模型的filed type总结

    1)AutoField:如果没有指明主键,就会产生一个自增的主键 2)BigIntegerField:64位的整形数值,从 -2^63 (-9223372036854775808) 到 2^63-1( ...

  8. js数组类型判断与数据类型判断回顾

    判断一个对象是否是数组方法有多种: 一.Array.isArray()函数 在ECMAScript5中可以通过Array.isArray()来做这件事: Array.isArray({}); //fa ...

  9. 解决IE下载 apk/ipa 变成zip：Android 手机应用程序文件下载服务器 配置解决方法

    解决IE apk/ipa变成zip:Android 手机应用程序文件下载服务器 配置解决方法 APK文件其实是zip格式,但后缀名被修改为apk,通过UnZip解压后,可以看到Dex文件,Dex是Da ...

  10. 由于C++类库版本不同导致的OpenCV编译链接错误

    太长不看版:GCC4和GCC5使用的C++标准库下,string的名字不一样,导致链接错误. 之前在Ubuntu下使用OpenCV的时候一切正常.后来再次编译的时候,连接器提示有些库函数找不到: ma ...