<script type="text/javascript">

        var $id=1;

        $(function(){

            $(".hehe").click(function(){

                $id+=1;

                $(this).after("<div class='hehe' id='"+$id+"'>"+$id+"</div>");

            });

        });

    </script>

　　<body>

    　　<div class="hehe" id="1"></div>

　　</body>

这种形式的事件只作用于已经存在的元素，新增的元素无效。以上例子中只能点击id=1的div，不能点击id=234..

    <script type="text/javascript">

        var $id=1;

        $(function(){

            $("body").on("click",".hehe",function(){

                $id+=1;

                $(this).after("<div class='hehe' id='"+$id+"'>"+$id+"</div>");

            });

    </script>

　　<body>

    　　<div class="hehe" id="1"></div>

　　</body>

以上例子可以为新增的元素绑定事件，新增的id都可以点击。当click时，事件从.hehe开始冒泡到body,然后触发body内的新增的.hehe，从而绑定事件。

    <script type="text/javascript">

        var $id=1;

        $(function(){

            $(".hehe").on("click",function(){

                $id+=1;

                $(this).after("<div class='hehe' id='"+$id+"'>"+$id+"</div>");

            });

        });

    </script>

    <body>

        <div class="hehe" id="1">1</div>

    </body>

但是以上代码只能也点击id1，原因是当click时，事件只能冒泡到第一个.hehe，而新增的.hehe是同级元素，不能为他们绑定事件。

jQuery on()方法是官方推荐的绑定事件的一个方法，适用于未创建的元素。

$(selector).on(event,childSelector,data,function,map)

jquery为新增元素添加事件的更多相关文章

  1. jquery 动态 新增 元素 绑定事件

    在jquery1.7以前使用live方法进行绑定,由于年代久远,这里就不介绍了. 在jquery1.7以后我们使用的on方法,这里需要注意的一点就是:如果想让动态生成的元素,都绑上事件,on前面的选择 ...

  2. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  3. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  4. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  5. 通过原生JS实现为元素添加事件

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  6. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

  7. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  8. jquery中为动态增加的元素添加事件

    // html代码 <ul id="main"> </ul> // js代码 $(function(){ // 动态添加html代码 $("#ma ...

  9. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

随机推荐

  1. 兼容IE的写法收集||bug修复

    这篇文章实时更新 属于IE的专属写法 其中,S表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式 hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q ...

  2. FBX Software Development Kit

    FBX Software Development Kit The FBX Software Development Kit (FBX SDK) allows software developers t ...

  3. Jbuilder 2008安装及破解

    1.下载Jbuilder及破解包 2.安装: 1>点击install 2> 选择第一项: 3>同意协议: 4>选择安装目录 5>选择服务器 6>选择默认 7> ...

  4. linq按条件sum

    var result = fruit.GroupBy(i => i.date) .Select(i => new { date = i.Key, no_of_apple = i.Where ...

  5. ApiHelper

    public static class ApiHelper { public static ReslultInfo<K> Try<K>(Action<ReslultInf ...

  6. CentOS 6.5安装配置LNMP服务器（Nginx+PHP+MySQL）

    CentOS 6.5安装配置LNMP服务器(Nginx+PHP+MySQL) 一.准备篇: /etc/init.d/iptables stop #关闭防火墙 关闭SELINUX vi /etc/sel ...

  7. idea配置2个tomcat

    复制tomcat   分别放在不同地方

  8. 总结一下安装linux系统经验-版本选择-安装ubuntu

    linux版本选择: 初次接触,建议选 Ubuntu 或者 Fedora,这两个发行版都很容易上手,而且两者都有很强大的中文社区,遇到问题比较容易解决,而且都有国内的源,安装或者更新软件时体验相对会好 ...

  9. recording just for inquiry in the future

    auditd审计 相关命令有: auditd, auditctl, ausearch, aureport 相关文件: /etc/audit/auditd.conf, /etc/audit/audit. ...

  10. 《UIP在NIOS上的移植》

    移植环境:Cyclone IV 开发板,网卡芯片为ENC28J60,浏览器(Firefox_24.0.0.5001a) 首先,需要了解网卡芯片ENC28J60,有中文版的说明书:http://wenk ...