当前位置:首页 > 日记 > 正文

jQuery为DOM动态追加事件的方法

jQuery为DOM动态追加事件的方法

处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞

最初是这样写的:

$(".btn-open").on("click", function () {        alert($(this).text());      })

当然这样是不起作用的,因为在document reday后,.btn-open 这个元素根本还不存在呢,列表没绑定,事件当然也帮不上的!

 然后是这样的:

$(".table").on("click", ".btn-open", function () {        alert($(this).text());      })

代码可以看得明白,找到.table 元素,给.btn-open 追加 click事件。一般来说这样就可以了。但是依然不行,我勒个去,我开始怀疑自己的记忆了。然后去找了下文档。

文档说:

事件处理只能绑定在当前被选中的元素上;而且,在您的代码调用.on()的时候,他们必须在页面文档中已经存在。

好吧,在document ready时,.table确实不存在,所以 还要继续改

$(document).on("click", ".btn-open", function () {        alert($(this).text());      })

终于可以工作了。

总结:

1.jQuery委托事件与直接绑定事件的区别:

$(“X”).on(“click”,function(){})

$(“X”).on(“click”,”选择X的子元素”,function(){})

2.事件处理只能绑定到当前存在的元素身上,也就是第一个选择器中的内容必须当前存在(这也是为什么第二段代码不起作用的原因,因为.table不存在),所以保险起见,可以直接绑定委托事件到document上。

以前一直没有仔细的阅读文档,对这一块模棱两可,今天弄清楚并记录下来。

以上这篇jQuery为DOM动态追加事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

photoshop图层填充颜色的教程步骤

photoshop图层填充颜色的教程步骤

填充,图层,方法,教程,步骤,  photoshop填充颜色其实就是给图层填充,很多刚学习的新手小伙伴可能还不知道,不知道的朋友可以看看以下关于图层填充颜色的教程,想必会对你有所帮助!photoshop图层填充颜色的方法第一步,选中我们要进行填充颜色的图…

Javascript中字符串和数字的操作方

Javascript中字符串和数字的操作方

字符串,操作方法,数字,电脑软件,Javascript,1、length – 返回字符串的长度‘abcd'.length; //4 2、Math.ceil(num) – 向上取整,不管小数点后面是多少,哪怕.00001,也会向上进一位。Math.ceil(25.9); //26 Math.ceil(25.5); //26 Math.ceil(2…

js 用于检测类数组对象的函数方法

js 用于检测类数组对象的函数方法

数组,检测,用于,方法,函数,如下所示://判定o是否是一个类数组对象//字符串和函数有length属性,但是它们//可以用typeof检测将其排除。在客户端JavaScript中,DOM文本节点//也有length属性,需要用额外判断o.nodeType!=3将其排除function isArrayL…

ps如何添加文字在上

ps如何添加文字在上

文字,方法,在上,图片,电脑软件,  添加文字在图片上面很常见,这样才可以达到图文并茂的感觉。接下来就是小编精心整理的一些关于ps如何添加文字在图片上的相关资料,供你参考。ps添加文字在图片上的方法1、比如要在这张图片上输入一句话&ldqu…

wps版word怎么从第二页设置页眉页

wps版word怎么从第二页设置页眉页

设置,页眉,方法,文档,电脑软件,  在写论文的过程中,编辑、打印文档等,正文一般都需要页眉和页脚,那么大家知道怎么在word中设置页眉页脚吗?下面给大家介绍如何从第二页设置页眉页脚的方法吧,欢迎大家来到学习。wps版word从第二页设置页眉页脚…

jquery实现平滑滚动详解

jquery实现平滑滚动详解

平滑,详解,电脑软件,jquery,本文实例为大家分享了jquery图片平滑滚动效果的具体代码,供大家参考,具体内容如下随便写了个DOM,没有美观性,见谅原理:1、定义两组ul列表放图,第一个ul放5张图,第二个ul为空2、为什么要用两个ul?因为要用到jQuery的克隆…

ps抠图后怎么更换背景

ps抠图后怎么更换背景

抠图,方法,背景,电脑软件,ps,  如果图片的背景需要更换,大家可以使用ps抠图的方法,然后再更换。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps抠图后怎么更换背景的内容,希望可以让大家有所收获!ps抠图后更换背景的方法首先第一…

excel日期函数的使用excel计算时间

excel日期函数的使用excel计算时间

日期函数,日期,计算,函数,时间,  excel日期函数是我们经常使用的程序,日期与时间函数是指在公式中用来分析和处理日期值和时间值的函数。下面小编举几个能计算时间和日期的函数。希望对你有帮助!excel日期函数的使用excel日期函数的使用1:例…

ppt2010浮雕艺术字怎么制作

ppt2010浮雕艺术字怎么制作

教程,浮雕,艺术字,电脑软件,制作教程,  在ppt中,可以制作各种各样的艺术字体,例如我们可以制作立体浮雕效果的艺术字,对于刚从其它版本转型过来的应该就不会太懂吧,没关系,下面就让小编告诉你 ppt2010怎样制作立体浮雕艺术字的方法。ppt2010制…

微信公众平台怎么查看自己的活动数

微信公众平台怎么查看自己的活动数

数据库,微信公众平台,自己的,电脑软件,  微信公众平台活动数据库可以查看用户的相关信息以及精准数据,如果你想更加了解用户的喜好,随过本站的教程来查看自己的活动数据库!下面就跟小编来了解一下吧!微信公众平台查看自己的活动数据库的方法…

怎样快速在Word2013中合并多个文档

怎样快速在Word2013中合并多个文档

文档,合并,多个,快速,电脑软件,  如果在网上下载一些Word文档,需要将他们放进一篇文档里,那么此时合并文档就是个不错的选择了。以下是小编为您带来的关于在Word2013中合并多个文档,希望对您有所帮助。在Word2013中合并多个文档具体操作如下…

JavaScript数据结构之二叉树的遍历

JavaScript数据结构之二叉树的遍历

数据结构,算法示例,二叉树的遍历,电脑软件,JavaScript,本文实例讲述了JavaScript数据结构之二叉树的遍历算法。分享给大家供大家参考,具体如下:三种遍历的代码:function inOrder(node){//中序遍历 if(node!=null){ inOrder(node.left)…