解决使用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 ...
随机推荐
- Java URLClassLoader和ClassLoader
开始:看名字都带有ClassLoader,叫做类加载器,事实上是可以理解为动态的加载类,不过,也不是只能加载类,也可以加载其他形式的文件,比如说.properties属性文件. 区别:其实在两个类加载 ...
- game of life
class Solution { public: void gameOfLife(vector<vector<int>>& board) { queue<int& ...
- 怎么样 解决nginx负载均衡的session共享问题呢
php服务器有多台,用nginx做负载均衡,这样同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,就会出现很多问题,比如说最常见的登录状态,下面提供了几种方式来解决ses ...
- JavaEE基础（三）
1.Java语言基础(逻辑运算符的基本用法) A:逻辑运算符有哪些 &,|,^,! &&,|| B:案例演示 逻辑运算符的基本用法 注意事项: a:逻辑运算符一般用于连接boo ...
- MVP+RXJAVA+RecyclerView实现sd卡根目录下的所有文件中的照片加载并显示
初学Rxjava,目前只能遍历加载指定目录下的所有文件夹中的照片,文件夹中如果还嵌套有文件夹目前还没找到实现方法. 先看mvp目录结构: 很抱歉,没有model. 接下来是view层的接口代码和pre ...
- IOS中两个view的切换
在ios中,rootview为PassWordViewController,secondview为SecondViewController,实现在rootview中听过一个跳转按钮实现跳转到secon ...
- cookie存储记录
////// 历史记录 $(function () { // 标题 var art_title = $("#Lbl_Hotel_Name").text(); // 得到当前路径 v ...
- Alice and Bob(贪心HDU 4268)
Alice and Bob Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- shell中cut用法
cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整篇信息分析的. (1)其语法格式为:cut [-bn] [file] 或 cut ...
- Linux 性能监控、测试、优化工具
Linux 平台上的性能工具有很多,眼花缭乱,长期的摸索和经验发现最好用的还是那些久经考验的.简单的小工具.系统性能专家 Brendan D. Gregg 在最近的 LinuxCon NA 2014 ...