<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添加的元素事件无效的方法的更多相关文章
	

    
								
  1. JavaScript采用append添加的元素错误
		
    1.错误叙述性说明 于IE览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new ch ...
    
		
    2. 
						
  2. 用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
		
    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
    
		
    3. 
						
  3. [转]jquery append 动态添加的元素事件on 不起作用的解决方案
		
    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
    
		
    4. 
						
  4. jquery append 动态添加的元素事件on 不起作用的解决方案
		
    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
    
		
    5. 
						
  5. jq append添加的元素click获取不到的解决方法
		
    移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...
    
		
    6. 
						
  6. jQuery对 动态添加 的元素 绑定事件（on()的用法）
		
    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
    
		
    7. 
						
  7. WEB前端技巧之JQuery为动态添加的元素绑定事件.md
		
      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...
    
		
    8. 
						
  8. jQuery获取动态添加的元素，live和on的区别
		
    今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
    
		
    9. 
						
  9. jquery append 动态添加的元素事件on 不起作用问题的解决
		
    on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. kvm虚拟机virt-manager启动报错
			
    安装kvm,用virt-manager启动时报错如下: Traceback (most recent call last):  File "/usr/share/virt-manager/v ...
    
			
    2. 
						
  2. Git几块区域关系
			
    
			
    3. 
						
  3. sql server 快捷键
			
    书签:清除所有书签. CTRL-SHIFT-F2 书签:插入或删除书签(切换). CTRL+F2 书签:移动到下一个书签. F2 功能键 书签:移动到上一个书签. SHIFT+F2 取消查询. ALT ...
    
			
    4. 
						
  4. PostgreSQL的 Slony-I 数据同步
			
    原文--http://www.tuicool.com/articles/mMvARf 先谈谈slony的局限性: 1. DDL动作是不会被复制到: 2. 如果想使用slony来同步数据,表必须是带有主 ...
    
			
    5. 
						
  5. C++11的一些新特性
			
    3.1.9崭新的Template特性 Variadic Template 可变参数模板 void print() { } template <typename T, typename… Type ...
    
			
    6. 
						
  6. view class source code with JAD plugin in Eclipse
			
    The default class viewer doesn't decompile the class file so you cannot open and check the source co ...
    
			
    7. 
						
  7. Java基础知识点
			
    以下10点为JAVA 基础知识,后面将足以总结和完善以备面试 数据类型 (包装类,字符串,数组) 异常处理 Java IO和NIO 数据结构 (集合和容器 ) 多线程(并发) 网络通信(协议) 面向对 ...
    
			
    8. 
						
  8. shell脚本之if语句
			
    一.前言 结构化编程中,主要有三种结构:顺序.分支.循环.由此可见分支判断的重要性. 而且在shell编程中往往会遇到进行判断的情况,比如:判断文件是否存在.目录是否存在等等. 二.if语句的结构 i ...
    
			
    9. 
						
  9. Java中通过JDBC远程连接Oracle数据库
			
    通过jdbc连接数据库,拢共分三步: 第一步:下载一个JDBC的驱动,然后把jar包扔到项目里并add to build path: 第二步:去本地oracle文件夹下找到“TNSNAMES.ORA” ...
    
			
    10. 
						
  10. 2016年6月27日 星期一 --出埃及记 Exodus 14:24
			
    2016年6月27日 星期一 --出埃及记 Exodus 14:24 During the last watch of the night the LORD looked down from the  ...
    
			
    11.