jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。
通俗的说就是在谁上面append就用谁做父级。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
//对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete!");
$(this).remove();
});
});
</script>
</head>
<body>
<h2 class='add'>单击我添加动态元素</h2>
<div class="info"></div>
</body>
</html>
jquery append 动态添加的元素事件on 不起作用的解决方案的更多相关文章
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用问题的解决
on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...
- jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery获取动态添加的元素,live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
- jquery 操作动态添加的元素
动态添加的元素,无法侦听到事件,写法如下: 使用函数.on 格式为: $(父元素).on('event','selector',function(){ //do something }) 例如 < ...
随机推荐
- Json.Net介绍及实例
本系列教程假设读者已经对Json有一定的了解,关于Json在这里不多说.本系列教程希望能对读者开发涉及到Json的.Net项目有一定的帮助.本系列教程是根据官方文档资料和自己项目应用汇总而成.如果觉得 ...
- Reverse Integer (JAVA)
public class Solution { public int reverse(int x) { StringBuffer sb = new StringBuffer(x+"" ...
- Hibernate 关联关系映射实例
双向多对一/一对多(many-to-one/one-to-many) 例子,多个学生对应一个班级,一个班级对应多个学生: 班级类,Grade.java: public class Grade { pr ...
- 设置启动页面-Launch Image
一.添加启动图 二.拖入相应尺寸的图片 图片必须是png格式的.不同机型需要的图片的尺寸: iPhone4.4s-@2x 3.5寸 640*960 iPhone5.5s.5c-@2x 4.0寸 640 ...
- PHP中的单例模式
额,只是复习到这里,做点笔记吧. 单例模式.何谓也?我想就是唯一吧.唯一的意思大概希特勒已经说的很清楚了.就是我也说不明白--把代码贴上来了事. <?php // Single instance ...
- SQL Server 锁的 8 种类型
第1种. 共享锁.由读取查寻产生. 第2种. 意向锁.用意向锁来表示有将要获得某一资源的意向. 第3种. 更新锁.在修改数据前获得. 第4种. 排它锁.用于独占某一资源时获得. 第5种. 架构锁.运行 ...
- VirtualBox 上安装CentOS 6.5
目标:1.在VirtualBox中安装CentOS2.配置虚拟机网络,实现: a.主机联网后,宿机能够通过主机上网 b.不管主机联网与否,主机都能SSH登录宿机,并且主宿机能互相传送文件 ...
- TComponent与String的转换(得到控件的DFM格式的描述)
现看下面这两个方法,把一个TComponent做成String,再就是把String转成TComponent function ComponentToStringProc(Component: TCo ...
- MFC可执行文件问题
MFC生成的.exe可执行文件,在其它机子上无法正常执行.主要是MFC库链接方式的问题,使用MFC分动态连接和静态连接两种: 静态连接就是把需要的MFC库函数放进你的exe之中,这样,在MFC库函 ...
- 顶尖数据挖掘教学案例库(TipDM-C10)产品白皮书
顶尖数据挖掘教学案例库 (TipDM-C10) 产 品 说 明 书 广州泰迪智能科技有限公司 版权所有 地址: 广州市经济技术开发区科学城232号 网址: ht ...