<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. 2012 Theory for Forward Rendering

    http://miss-cache.blogspot.com/2012/08/lighting-transparent-surfaces-with_26.html http://aras-p.info ...

  2. ecshop循环foreach，iteration，key，index

    转载: 最近刚接触ecshop不久,感觉是非常的强大,做商城网站,整个流程都差不多搞好了,就是支付流程要自己完善完善,不过也有不足,文章功能还不够好. 通过几天的应用,总结出了ec模版中foreach ...

  3. SCI/EI期刊投稿 Reply Letter 常用格式总结

    SCI/EI期刊投稿Reply Letter常用格式总结          整个论文投稿的过程中,会遇到各种问题,需要我们向主编询问或是回复.下面主要总结了responses to the comme ...

  4. 【Delphi】GIF 动画建立

    var Gif:TGifImage; begin //Setting the delay for each frame TGIFGraphicControlExtension.; TGIFGraphi ...

  5. php如何发起POST DELETE GET POST 请求

    关于POST,DELETE,GET,POST请求 get:是用来取得数据.其要传递过的信息是拼在url后面,因为其功能使然,有长度的限制 post:是用来上传数据.要上传的数据放在request的he ...

  6. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  7. MySQL创建一个用户，指定一个数据库 授权

    Mysql 创建一个用户 hail,密码 hail,指定一个数据库 haildb 给 hail mysql -u root -ppassworduse mysql;insert into user(h ...

  8. PostgreSQL建立分区表示例

    pgsql 分区表: --主表 create table test(id integer, name varchar(32)); create index idx_test_id on test us ...

  9. golang笔记——包

    1.包简述 GO本身没有项目的概念,只有包,包括可执行包和不可执行包,而不管什么包,都应该包含在 $GOPATH/src 目录下,GO命令和编译器会在 $GOPATH/src 目录下搜索相应的包.比如 ...

  10. C# 中excel操作

    c#中设置Excel单元格格式    1.全表自动列宽 mysheet.Cells.Select(); mysheet.Cells.Columns.AutoFit(); 2.合并    excelRa ...