问题：通过js给页面添加新元素，并给该元素添加绑定事件，但新添加的元素上却没有绑定任何事件。

常见例子：在处理表格的时候，每行行末有个删除按钮，如下图。点击删除按钮的时候删除这一行。

//html部分

    <table border="" cellspacing="" cellpadding="" class="text-center">

            <caption class="text-center">用户信息表</caption>

            <tr>

                <td>序号</td>

                <td>姓名</td>

                <td>性别</td>

                <td>年龄</td>

                <td>操作</td>

            </tr>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>男</td>

                <td>18</td>

                <td>

                    <a class="deltr">删除</a>

                </td>

            </tr>

        </table>

        <button class="btn btn-info">添加</button>

//js部分

$(function() {

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

                $("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a class="deltr">删除</a></td></tr>');

            })

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

                $(this).parents("tr").remove();

            })

        })

如果上图中的删除按钮在dom操作前就在页面中的话，给其添加是可以的；如果表格中的每行都是通过dom操作添加的话，可以发现，删除按钮上却没有绑定任何事件。那么要怎么做才可以给dom生成的元素添加事件呢？

方法一：onclick法

$(function() {

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

　　　　$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a onclick="deltr(this)">删除</a></td></tr>');

　　})

})

function deltr(delbtn){

　　$(delbtn).parents("tr").remove()

}

　ps：该方法没有实现结构与行为分离的准则。关于dom操作添加事件一般采用的都是该方法。

　注意：此时的deltr这个function必须是全局函数，得放在$(function(){})外面，放里面就成局部函数了，html里的onclick就调用不到了。

方法二：DOM 生成事件后绑定

　　在dom操作生成元素之后，添加事件。如下

$(function() {

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

　　　　$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a>删除</a></td></tr>');

       $("table a").on("click",function(){

           deltr($(this));

       })

　　})

})

function deltr(delbtn){

　　$(delbtn).parents("tr").remove()

}

方法三： 事件委托

$("body").on("click", "table a", function(){

 　　deltr($(this));

})

　　

运行此段代码，会发现功能根本无法实现。这是因为此时函数内的 this 指向 body；

$("body").on("click", "table a", function(e){

 　　if(e.target.nodeName = "a"){

         console.log($(this))

    }

})

因为事件是冒泡的，所以我们要阻止冒泡到 body 之前，使用 e.target 截取到触发事件的元素上。

给DOM生成的元素添加事件的更多相关文章

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

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

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

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

  3. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. python学习笔记（二）

    (一)模块打包     --->        注:suba和subb文件夹下的__init__.py文件,即使为空,也必须存在 "setup.py" from distut ...

  2. 解决自定义leftBarButtonItem返回手势失效的方法

    考虑到interactivePopGestureRecognizer也有delegate属性,替换默认的self.navigationController.interactivePopGestureR ...

  3. Xms Xmx PermSize MaxPermSize 区别

    Eclipse崩溃,错误提示: MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) s ...

  4. C# Async, Await and using statements

    Async, Await 是基于 .NEt 4.5架构的, 用于处理异步,防止死锁的方法的开始和结束, 提高程序的响应能力.比如: Application area           Support ...

  5. FPGA优化之高扇出

    Fanout即扇出,模块直接调用的下级模块的个数,如果这个数值过大的话,在FPGA直接表现为net delay较大,不利于时序收敛.因此,在写代码时应尽量避免高扇出的情况.但是,在某些特殊情况下,受到 ...

  6. pycharm快捷键及一些常用设置

    pycharm快捷键及一些常用设置,有需要的朋友可以参考下. Alt+Enter 自动添加包 Ctrl+t SVN更新 Ctrl+k SVN提交 Ctrl + / 注释(取消注释)选择的行 Ctrl+ ...

  7. UIAlertController

    楼主在整理项目的警告,于是乎你懂的. 然后自己整理了一下以后方便自己忘了之后能及时找到它 关于UIAlertController .h文件的解析 /** 关于UIAlertController的解析 ...

  8. Apache commons-configuration setDelimiterParsingDisable不生效的处理

    Apache commons-configuration setDelimiterParsingDisable不生效的处理 项目中有用到commons-configuration,版本1.9. 配置初 ...

  9. Android 数字签名

    一个ApK如果要安装到手机上,必须要一个数字签名,不过你是debug也好,release也好,这个数字签名来源一个叫做证书的东西,在我们debug的时候,开发工具已经帮我们生成了一个叫做debug.k ...

  10. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...