<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. 扩展服务 修改新增Service的默认主题

    问题描述:想要在F:\PHPnow-1.5.6\htdocs\yt\Yourphp\Tpl\      目录下新增一个Service\Default(A)   和Service\new(B) 两个主题 ...

  2. macbook 放flash发烫，转html5

    http://zythum.sinaapp.com/youkuhtml5playerbookmark/

  3. LVS工作总结之原理篇–DR模式

    原文地址: http://www.chenqing.org/2012/11/%E3%80%90lvs%E3%80%91lvs%E5%B7%A5%E4%BD%9C%E6%80%BB%E7%BB%93%E ...

  4. CMD窗口如何调整大小 / 颜色

    Windows默认的命令行工具CMD暴丑无比..很多人都会因为这个原因去寻找漂亮的命令行工具.. 但是很多所谓的命令行工具并不能完美的支持到CMD.. 譬如 PowerCMD 或 Cmder 之流.. ...

  5. Entity Framework数据库初始化四种策略

    策略一:数据库不存在时重新创建数据库 程序代码 Database.SetInitializer<testContext>(new CreateDatabaseIfNotExists< ...

  6. C# ManualResetEvent和AutoResetEvent 使用笔记

    一.两者区别 1.ManualResetEvent 调用一次Set()后将允许恢复所有被阻塞线程.需手动在调用WaitOne()之后调用Reset()重置信号量状态为非终止,然后再次调用WaitOne ...

  7. [Mongodb]删除指定字段

    摘要 如果想要删除mongodb中一个document的某个字段,该如何做呢? 方法模版 db.user.update({"email_state":{"$exists& ...

  8. lishell学习之路:流程控制(case)

    流程控制case语句: 介绍:多分支case条件语句 1.case语句和if..elif..else语句一样都是多分支条件语句,不过和if多分支条件语句不同的是,case语句只能判断一种条件关系,而i ...

  9. HDOJ 3709 Balanced Number

    数位DP... Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java ...

  10. 【PHP面向对象(OOP)编程入门教程】16.__toString()方法

    我们前面说过在类里面声明“__”开始的方法名的方法(PHP给我们提供的),都是在某一时刻不同情况下自动调用执行的方 法,“__toString()”方法也是一样自动被调用的,是在直接输出对象引用时自动 ...