解决jquery动态创建元素绑定事件失效问题
存在问题
在我们使用jquery动态创建元素后往往会遇到一些问题,如:
给.button按钮绑定了点击时间,执行alert:(1);
点击事件代码如下:
<script>
$("#add").click(function(){
var btn='<input type="button" class="button" value="del" >';
$("#box").html(btn);
});
$(".button").click(function(){
alert(1);
});
</script>
但在我们动态创建了.button之后,新创建的.button元素并没有点击效果但原来写的.button有点击弹窗事件,这就是问题所在。
我们来解决这个问题,这个问题的关键原因在于:动态生成的元素要通过事件委托来处理。
我们通过事件委托来解决问题:
$("#box").on('click','.button',function(){
alert(1);
});
希望我的答案能解决你遇到的问题。
解决jquery动态创建元素绑定事件失效问题的更多相关文章
- jquery 动态 新增 元素 绑定事件
在jquery1.7以前使用live方法进行绑定,由于年代久远,这里就不介绍了. 在jquery1.7以后我们使用的on方法,这里需要注意的一点就是:如果想让动态生成的元素,都绑上事件,on前面的选择 ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- jQuery动态添加元素并绑定事件
写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...
- jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示
刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 关于 js 动态生成html 绑定事件失效的问题
在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...
- 关于解决JQUERY对INPUT元素Change事件不兼容的问题
最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onc ...
- 解决jquery动态增加元素后children值没有变的问题
html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...
- jquery动态创建元素
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- Linux进程间通信(三) - 信号
什么是信号 软中断信号(signal,又简称为信号)用来通知进程发生了异步事件.在软件层次上是对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是进程间通 ...
- 【BZOJ3510】首都 LCT维护子树信息+启发式合并
[BZOJ3510]首都 Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打 ...
- 自然常数e的神奇之美
- Spring MVC中的模型数据处理
一.综述 Spring MVC 提供了以下途径来输出模型数据: 1.ModelAndView 当处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加模型数据到请求域. 2.Ma ...
- 测试站如何最快获取正式站的最新数据: ln -s
针对静态数据, 比如图片/js等文件, 测试站如何获取最新的呢? ln -s /alidata/www/mysite/uploads /alidata/www/mysite_test/uploads ...
- 如何将gedit变成c++编译器
本蒟蒻的第一篇文章,分享一下神佬教我的好东西 ——将Ubuntu 16.04上gedit变为编译器! 1° 新建文档.然后点击编辑,打开首选项. 2° 勾选外部工具,然后退出.打开工具,选择Manag ...
- 3.25课·········JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- Example 2 - contour plots
load "$NCARG_ROOT/lib/ncarg/nclscripts/csm/gsn_code.ncl" begin cdf_file = addfile("$N ...
- 高通8X16电池BMS算法(二)【转】
本文转载自:http://www.voidcn.com/blog/yanleizhouqing/article/p-6051912.html 上一篇主要讲电池相关的一些知识,上节忘记讲了,电池一般分为 ...
- LINQ 学习路程 -- 查询操作 Distinct Except Intersect Union
Set Operators Usage Distinct 去掉集合的重复项 Except 返回两个集合的不同,第一个集合的元素不能出现在第二个集合中 Intersect 返回两个集合的交集,即元素同时 ...