编程 Javascript

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

Posted in Javascript onJuly 30, 2015

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

具体不多说了，请看下面的代码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
 //对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete！");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class='add'>单击我添加动态元素</h2>
 <div class="info"></div>
 </body>
</html>

以上代码就是本文对jquery append 动态添加的元素事件on 不起作用的解决方案，希望对大家学习有所帮助。

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

- Author -

机器有毒

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript获得地址栏参数的两种方法

Nov 08 Javascript

javascript 仿QQ滑动菜单效果代码

Sep 03 Javascript

jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果

Aug 24 Javascript

javascript常用代码段搜集

Dec 04 Javascript

jQuery检查元素存在性(推荐)

Sep 17 Javascript

设置jquery UI 控件的大小方法

Dec 12 Javascript

JavaScript简单计算人的年龄示例

Apr 15 Javascript

Node.js 使用jade模板引擎的示例

May 11 Javascript

Vue之mixin全局的用法详解

Aug 22 Javascript

vue 对象添加或删除成员时无法实时更新的解决方法

May 01 Javascript

vue项目引入ts步骤(小结)

Oct 31 Javascript

解决ant Design中Select设置initialValue时的大坑

Oct 29 Javascript

jQuery代码实现发展历程时间轴特效

Jul 30 #Javascript

使用js复制链接中的部分文字的方法

Jul 30 #Javascript

JS如何实现文本框随文本的长度而增长

Jul 30 #Javascript

js代码实现随机颜色的小方块

Jul 30 #Javascript

js代码验证手机号码和电话号码是否合法

Jul 30 #Javascript

javascript设计模式之对象工厂函数与构造函数详解

Jul 30 #Javascript

js判断浏览器类型及设备（移动页面开发）

Jul 30 #Javascript