<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. win32 treeview
			
    // 1.create treeview DWORD dwStryle = WS_VISIBLE | WS_CHILD | TVS_HASLINES|TVS_SHOWSELALWAYS/*|TVS_L ...
    
			
    2. 
						
  2. $(document).ready vs $(window).load vs window.onload
			
    原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code whe ...
    
			
    3. 
						
  3. 【转载】perl接受传递参数的方法
			
    #! /usr/bin/perl use Getopt::Std;use warnings;use strict; sub read_from_sh($) { my $file = shift; my ...
    
			
    4. 
						
  4. 织梦系统中出现DedeTag Engine Create File False提示原因及解决方法
			
    今天更新网站时dedecms系统时,遇到一个问题:DedeTag Engine Create File False  出现这样的提示. 其实这也不算是什么错误,我个人觉得最重要的一点就是根目录下没有给 ...
    
			
    5. 
						
  5. TEXT、TINYTEXT、MEDIUMTEXT、LONGTEXT选择  和  char varchar varchar2 的区别
			
    TEXT.TINYTEXT.MEDIUMTEXT.LONGTEXT选择: 储存不区分大小写的字符数据 TINYTEXT 最大长度是 255 (2^8 - 1) 个字符. TEXT 最大长度是 6553 ...
    
			
    6. 
						
  6. jquery easyui读取json文件乱码
			
    输出的json要求用utf-8,否则因json的编码格式有问题显示不了中文.记事本默认编码是ANSI,若保存的json是由记事本改后的缀名,则json格式有问题,显示中文为乱码. 解决方法:打开.js ...
    
			
    7. 
						
  7. bootstrap/moban191/js/templatemo_custom.js
			
    (function($) { "use strict"; // Cache selectors var lastId, topMenu = $(".menu-holder ...
    
			
    8. 
						
  8. ACM题目————二叉树的遍历
			
    一.二叉树的后序遍历: 题目描述 给定一颗二叉树,要求输出二叉树的深度以及后序遍历二叉树得到的序列.本题假设二叉树的结点数不超过1000 输入 输 入数据分为多组,第一行是测试数据的组数n,下面的n行 ...
    
			
    9. 
						
  9. 2016年12月7日 星期三 --出埃及记 Exodus 21:2
			
    2016年12月7日 星期三 --出埃及记 Exodus 21:2 "If you buy a Hebrew servant, he is to serve you for six year ...
    
			
    10. 
						
  10. mysql 修改数据库的列
			
    alter table tableName oldcolumn newcolumn datatype;
    
			
    11.