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

使用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. 6389. 【NOIP2019模拟2019.10.26】小w学图论

    题目描述 题解 之前做过一次 假设图建好了,设g[i]表示i->j(i<j)的个数 那么ans=∏(n-g[i]),因为连出去的必定会构成一个完全图,颜色互不相同 从n~1染色,点i的方案 ...

  2. dnsmasq+Stunnel+sniproxy加密代理

    一.环境介绍 [root@kimissVPN ~]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@kimissVPN ~]# un ...

  3. 最大流 && 最小费用最大流模板

    模板从  这里   搬运,链接博客还有很多网络流题集题解参考. 最大流模板 ( 可处理重边 ) ; const int INF = 0x3f3f3f3f; struct Edge { int from ...

  4. Java——容器(Interator)

    [Interator接口]   <1> 所有实现了Collection接口的容器类都有一个interator方法用以返回一个实现了Interaor接口的对象. <2> Inte ...

  5. CSS选择器(CCS第三版)

    什么是选择器? CSS选择器就是使样式找到应用对象. 简单选择器(Simple selectors) 在日常开发中,最常用的选择器,也是最基本的选择器. 元素选择器(Type selector) 针对 ...

  6. struct files_struct

    内核利用文件描述符(file descriptor)来访问文件.文件描述符是非负整数.它是一个索引值,指向内核为每一个进程所维护的该进程打开文件的记录表.当程序打开一个现有文件或者创建一个新文件时,内 ...

  7. JAVA 8 :从永久区(PermGen)到元空间(Metaspace)

    你注意到了吗?JDK 8早期可访问版本已经提供下载了,java 开发人员可以使用java 8 提供的新的语言和运行特性来做一些实验.其中一个特性就是完全的移除永久代(Permanent Generat ...

  8. java创建对象方法列表

    引用 不用构造方法也能创建对象 前言 java中对象创建的方法主要包括,1,使用new关键字,2.使用clone方法,3.反射机制,4.反序列化.其中1,3都会明确的显式的调用构造函数.2是在内存上对 ...

  9. kubenetes-rancher多集群管理(二十二)

    概述 Rancher是一套容器管理平台,它可以帮助组织在生产环境中轻松快捷的部署和管理容器. Rancher可以轻松地管理各种环境的Kubernetes,满足IT需求并为DevOps团队提供支持. K ...

  10. Apache2.4常用编译参数

    转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...