解决使用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 ...
随机推荐
- laravel5.0升级到laravel5.1
1.修改composer.json.将其中的"laravel/framework": "5.0.*"修改为"laravel/framework&quo ...
- 第一个应用程序HelloWorld
iOS7 Beta已经发布了,迫不及待地下载了iOS 7及Xcode 5并体验了一下.先做一个简单的Hello World看看都有哪些变化吧.1. 启动Xcode5-DP:2. 从菜单选择File-N ...
- BZOJ 1036：树的统计Count（树链剖分）
http://www.lydsy.com/JudgeOnline/problem.php?id=1036 题意:中文题意. 思路:也是普通的树链剖分.唯一注意的点是在change函数中 while(t ...
- 修改ECSHOP后台的商品列表里显示该商品品牌
如何在在ECSHOP后台的商品列表中也显示商品的品牌”.下面就来最模板讲一下如何来修改.此方法只保证在ECSHOP2.7.2版本下有效,其他版本请参照修改. 第一步:首先我们来打开程序文件: /adm ...
- Android网络通信之WiFi Direct
使用Wi-Fi Direct技术可以让具备硬件支持的设备在没有中间接入点的情况下进行直接互联.Android 4.0(API版本14)及以后的系统都提供了对Wi-Fi Direct的API支持.通过对 ...
- SecureCRT issue "Could not open clipboard: Assess is denied" (无法打开粘贴板:访问被拒绝)
I got an issue when copying some line/word (actually just select the context ) in the Linux terminal ...
- ubuntu下查看cpu信息
查看CPU信息cat /proc/cpuinfo 几个cpu more /proc/cpuinfo |grep "physical id"|uniq|wc -l 每个cpu是几核( ...
- C#之桶中取黑白球问题
<编程之美>284页,问题4.6:桶中取黑白球. 有一个桶,里面有白球.黑球各100个,人们必须按照以下规则把球取出来: 1. 每次从桶中拿两个球: 2. 如果两球同色,再放入一个黑球: ...
- Java的Properties类和读取.properties文件
一..properties文件的作用 Properties属性文件在JAVA应用程序中是经常可以看得见的,也是特别重要的一类文件.它用来配置应用程序的一些信息,不过这些信息一般都是比较少的数据,没有必 ...
- flask安装
Flask简介 Flask算是小型框架,自开发伊始就被设计为可扩展的框架,它具有一个包含基本服务的强健核心.Flask有两个依赖:路由.调试.和web服务器网关接口(Web Server Gatewa ...