今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题:

使用append动态生成的元素事件绑定失效了。

查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。

解决方案1:

单独为新添加的元素绑定事件,显然这样的操作存在代码冗余,不够简洁,这时我们可用看一看第二种解决方案。

解决方案2:

使用$(document).on('事件类型','要选择的元素',function(){})方法为元素绑定事件
   
 on方法包含很多事件,点击,双击等等事件。与click(fn)相比,二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

这样动态元素的事件绑定问题就可以解决了。

append动态生成的元素,无法触发事件的原因及解决方案的更多相关文章

  1. append()方法生成的元素绑定的事件失效解决办法

    我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定 ...

  2. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  3. JQ动态生成的元素,原事件绑定失效

    Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...

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

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

  5. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  6. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  7. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  8. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

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

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

随机推荐

  1. linux运维、架构之路-CentOS7

    一.CentOS7介绍 1.CentOS7使用起来最大的变化就是服务管理 2.systemd是linux下的一种init软件,开发目标是提供更优秀的框架以表示系统服务间的依赖关系,并依此实现系统初始化 ...

  2. RN组件的生命周期

    来自:http://www.devio.org/tags/#React%20Native

  3. RedisTemplate访问Redis数据结构(五)——ZSet

    Redis 有序集合和无序集合一样也是string类型元素的集合,且不允许重复的成员.不同的是每个元素都会关联一个double类型的分数.有序集合的成员是唯一的,但分数(score)却可以重复.red ...

  4. UE4中显示AI Debug信息

    运行时,按下引号键('),就会出现AI的Debug信息,包含 AI Behavior Tree EQS Perception 四个大的分类,可以通过键盘上的1234键来显示和关闭相应的选项. 另外在E ...

  5. [CF Round603 Div2 F]Economic Difficulties

    题目:Economic Difficulties 传送门:https://codeforces.com/contest/1263/problem/F 题意:给了两棵tree:Ta(拥有a个节点,节点编 ...

  6. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  7. php WebSocket 简单实现demo

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据. 在 ...

  8. Day3 01 枚举

    枚举:关键字 enum  主要为了限定了选择范围,声明了一组相关的值类型的集合. 1.枚举类型,实质上是整整 2.如果不进行赋值操作,枚举类型从0开始递增. 3.枚举不能定义字段 属性  方法. 例如 ...

  9. python中导入sklearn中模块提示ImportError: DLL load failed: 找不到指定的程序。

    python版本:3.7 平台:windows 10 集成环境:Anaconda3.7 64位 在jupyter notebook中导入sklearn的相关模块提示ImportError: DLL l ...

  10. ubuntu 安装java1.8

    1.进入官网下载页面http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.选择需要的版本,进入下载页面 下载 jdk ...