<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. 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  3. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  5. jq append添加的元素click获取不到的解决方法

    移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...

  6. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  7. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  8. jQuery获取动态添加的元素,live和on的区别

    今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...

  9. jquery append 动态添加的元素事件on 不起作用问题的解决

    on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...

随机推荐

  1. UserSelector兼容

    1.更新到asp.net2.0或以上,将Microsoft.Web.UI.TreeView更换为新的System.Web.UI.WebControls.TreeView 2.将UserId,UserT ...

  2. Linux sar分析网卡流量

    yum install sysstat    sar -n { DEV | EDEV | NFS | NFSD | SOCK | ALL }    sar 提供六种不同的语法选项来显示网络信息.-n选 ...

  3. bash正则表达式

    星号*: 匹配它前面的字符串或正则表达式任意次(包括0次). 比如:* 可能匹配的字符串有:... ...... 句号.: 匹配除换行符之外的任意一个字符. 比如:"112.",将 ...

  4. 如何为github上的项目添加gif效果图

    一.制作gif图片 如何制作可以参考: http://www.jianshu.com/p/27ec6375b8ab?utm_campaign=maleskine&utm_content=not ...

  5. js的作用域

    全局代码和两个函数都会形成一个作用域,通过函数是在哪个作用域下创建的来确定作用域的上下级关系.作用域最大的用处是隔离变量,不同作用域下同名变量不会有冲突.

  6. C++TSL之map容器(悲伤的故事)

    说一个悲伤地故事! 这几天正在加紧时间学STL!昨天刚刚勉强把map弄懂一点点.(故事的前提) 今天,来到平台准备刷有关map的题,老师推荐了一道题目.说是有关map.然后..不会!! 后来,百度.. ...

  7. ci中简单实用的权限管理

    实用的权限管理 对多数网站来说,使用完整的rbac权限管理杀鸡用牛刀绝对的吃力不讨好,因为我们只是简单分角色然后对角色进行管理行使其相对于的角色赋予的权限; 在实际的开发中用位运算来对权限进行验证是十 ...

  8. JS删除script标签

    可以试试以下方法 var deleteJs = document.getElementById('xxx'); var otherJs = document.getElementsByTagName( ...

  9. java 类加载顺序

    1.虚拟机在首次加载Java类时,会对静态初始化块.静态成员变量.静态方法进行一次初始化 2.只有在调用new方法时才会创建类的实例 3.类实例创建过程:按照父子继承关系进行初始化,首先执行父类的初始 ...

  10. andriod 新建Activity_ Form

    在一个Android工程,如何新建一个Activity? 一:新建一个类(*.class),继承自android.app.Activity类. 二:在res/layout目录下新建一个布局xml文件, ...