<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. javascript || and &&
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    2. 
						
  2. [团队项目]SCRUM项目6.0  7.0 （新）
			
    6.0----------------------------------------------------- sprint演示 1.坚持所有的sprint都结束于演示. 团队的成果得到认可,会感觉 ...
    
			
    3. 
						
  3. Djnago的一些零碎知识点
			
    1.TEMPLATE_DIRS relative to the project folder http://stackoverflow.com/questions/9856683/using-pyth ...
    
			
    4. 
						
  4. （jdbc）取得数据库自动生成的主键方法
			
    一些类,在前面的博客中有,就不重复了 public class Test2 { TestDAO t=new TestDAO(); /*前提是数据表的主键是自动增加的, *取得数据库自动生成的主键 *  ...
    
			
    5. 
						
  5. MultiSelectComboBox(一)
			
    1. MultiSelectComboBox.xaml <UserControl x:Class="MultiSelectComboBox.MultiSelectComboBox&qu ...
    
			
    6. 
						
  6. Sqlite查询时间段内的数据问题解决！
			
    最近搞Sqlite本地查询,需求为查询某时间段内的数据,在SQL中我们都知道为: select * from tblName where rDate Between '2008-6-10' and   ...
    
			
    7. 
						
  7. 测试Animation大型动画文件拆分播放的可行性
			
    最近遇到一个问题,剧情动画文件大了复杂了之后,每次修改输出很麻烦,导出fbx就需要20分钟. 所以我想到了一个比较好的解决方法,在unity这边解决.把动画文件拆分成若干份,然后赋予不同的层并行播放  ...
    
			
    8. 
						
  8. JAVA基础知识之JVM-——使用反射生成并操作对象
			
    Class对象可以获取类里的方法,由Method对象表示,调用Method的invoke可以执行对应的方法:可以获取构造器,由Constructor对象表示,调用Constructor对象的newIn ...
    
			
    9. 
						
  9. noi 8465 马走日
			
    8465:马走日 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  1024kB 描述 马在中国象棋以日字形规则移动. 请编写一段程序,给定n*m大小的棋盘,以及马的初始位置(x,y ...
    
			
    10. 
						
  10. SharePoint自动化系列——Site/Web/List级别的导航菜单
			
    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 需求:在不同的测试用例中,对脚本中不确定的因素需要和用户交互来确定,比如选择哪个site,选择哪个 ...
    
			
    11.