解决使用jQuery采用append添加的元素事件无效的方法
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").live("click",function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>
</html>
但是随着jQuery的版本升级，自从jQuery 1.9及其以上已经无法使用live了，那么没有办法了吗，不是的，对于jQuery1.9版本及其以上可以使用on，其效果等同于live。下面的on的使用方法
<script>
$(document).on("click", ".waiting-save", function () {
$(this).html('@T("Saving...")')
$(this).attr("disabled", "");
});
</script>
整个代码例子为：
<!DOCTYPE html>
<html> <head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<form action=" " method=" " >
<div class="list">
<div class="addList">
分部：
<select>
<option>分部</option>
<option>分部1</option>
<option>分部2</option>
</select>
数量：<input type="text" value="123"/>
<!-- <span class="add">添加</span> -->
<input type="button" value="添加" class="add"/>
</div>
</div>
</form>
</div>
</body> <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
//全局变量i
i=0;
$(".add").click(function() {
$(".list").append(function(){
return '<div class="delList'+i+'"> 分部： <select><option>分部</option><option>分部1</option><option>分部2</option></select> 数量：<input type="text" value="123"/><input type="button" class="del" value="删除"/> </div>';
});
i++;
});
$(document).on("click", ".del", function () {
$(this).parent().remove();
});
})
</script>
</html>
注意：
1.button的问题
<input type="button" value="添加" class="add"/>
这句不能使用 <button class="add">添加</button>
使用button标签的时候，添加的 delList DIV会闪一下，闪了之后就会消失了，不能显示在页面上。
2.input标签闭合问题。
在编辑页面的时候，要记得标签要闭合，不闭合的话，会出现问题。 参考网址：
http://so.xiaohuihui.net/?a=url&k=6c98d343&u=aHR0cDovL3d3dy5idWJ1a28uY29tL2luZm9kZXRhaWwtNTcwMjgyLmh0bWw=&t=6Kej5Yaz5L2@55SoalF1ZXJ56YeH55SoYXBwZW5k5re75Yqg55qE5YWD57Sg5LqL5Lu25peg5pWI55qE5pa55rOVIA==&s=anF1ZXJ5IGFwcGVuZCDml6DmlYg=
解决使用jQuery采用append添加的元素事件无效的方法的更多相关文章
- JavaScript采用append添加的元素错误
1.错误叙述性说明 于IE览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new ch ...
- 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jq append添加的元素click获取不到的解决方法
移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...
- jQuery对 动态添加 的元素 绑定事件（on()的用法）
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- WEB前端技巧之JQuery为动态添加的元素绑定事件.md
jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
- jQuery获取动态添加的元素，live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- jquery append 动态添加的元素事件on 不起作用问题的解决
on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...
随机推荐
- linux内核中异步通信机制--信号处理机制【转】
转自:http://blog.csdn.net/lu_embedded/article/details/51131663 什么是异步通信?很简单,一旦设备准备好,就主动通知应用程序,这种情况下应用程序 ...
- export
export export PATH=$PATH:/ROOT
- Java常用jar包用途
Java常用jar包用途: USAGE INDEX JAR NAME USAGE 1 ASM asm-2.2.3.jar ASM字节码库 2 ASM asm-commons-2.2.3.jar ASM ...
- VS 6.00 工程项目文件详解
*.dsp(DeveloperStudio Project):是VC++的工程配置文件,比如说你的工程包含哪个文件,你的编译选项是什么等等,编译的时候是按照.dsp的配置来的.*.dsw(Develo ...
- 20150916_001 vba 基础
一.什么是“宏”.“宏”有什么用 关于“宏”的详细定义,可以参考百度百科的解释(点击查看).我给它一个简单的或许不太严谨的定义: 宏的通俗定义:宏是被某些软件所能识别.理解并执行的特定代码/脚本. 宏 ...
- Robberies(简单的01背包 HDU2955)
Robberies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 花40分钟写一个-CBIR引擎-代码公开
浏览网页的时候发现一篇不错的文章"用Python和OpenCV创建一个图片搜索引擎的完整指南"http://python.jobbole.com/80860/.作者在浏 ...
- python测试代理IP地址
代码: # -*- coding: utf-8 -*- import urllib,urllib2,re from random import choice from scrapy.selector ...
- ubuntu查看内存占用和查看cpu使用情况的简单方法(ubuntu内存管理)
单独查看内存使用情况的命令:free -m查看内存及cpu使用情况的命令:top也可以安装htop工具,这样更直观,安装命令如下:sudo apt-get install htop安装完后,直接输入命 ...
- 利用JAVA反射机制将JSON数据转换成JAVA对象
net.sf.json.JSONObject为我们提供了toBean方法用来转换为JAVA对象, 功能更为强大, 这里借鉴采用JDK的反射机制, 作为简单的辅助工具使用, 有些数据类型需要进行转 ...