jQuery对新添加的控件添加响应事件
1. 通过id和类控制
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
var val = "<div class='mi'>nihao</div>";
jQuery("#h").append(val);
$(".mi").click(function(){
$(this).hide();
});
});
}); $(document).ready(function(){
$("#mi").click(function(){
$(this).hide();
});
});
</script>
</head> <body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
效果
初始化
点击一次
点击三次
点击一次“你好”
2. 通过数组中的值作为id
2.1 错误思路
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"] $(document).ready(function(){
$("#button1").click(function(){
for (var i = 0; i < val.length; ++i)
{
var tmp = "<div id=" + val[i] + ">nihao</div>";
jQuery("#h").append(tmp);
}
});
}); for (var i = 0; i < val.length; ++i)
{
$(document).ready(function(){
$("#" + val[i]).click(function(){
{
$(this).hide();
}
});
});
} </script>
</head> <body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
问题在于,一开始并没有id为val列表中的控件,此时初始化事件不行的。
2.2 改正1——集中处理
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"] $(document).ready(function(){
$("#button1").click(function(){
for (var i = 0; i < val.length; ++i)
{
var tmp = "<div id=" + val[i] + ">nihao</div>";
jQuery("#h").append(tmp);
} for (var i = 0; i < val.length; ++i)
{
$(document).ready(function(){
$("#" + val[i]).click(function(){
{
$(this).hide();
}
});
});
}
});
}); </script>
</head> <body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
注:点击一次“hihi”,原因是原来id的控件只是隐藏了,再添加就会有重复的id了。
2.3 改正2——单独处理
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"] $(document).ready(function(){
$("#button1").click(function(){
for (var i = 0; i < val.length; ++i)
{
var tmp = "<div id=" + val[i] + ">nihao</div>";
jQuery("#h").append(tmp);
$("#" + val[i]).click(function(){
$(this).hide();
});
}
});
}); </script>
</head> <body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
深入了解jQuery, 有疑问
<html>
<head>
<script src="jquery.js"></script>
<script>
var val = ["No1", "No2", "No3", "No4"] $(document).ready(function(){
$("#button1").click(function(){
for (var i = 0; i < val.length; ++i)
{
var tmp = "<div class='divclass' id=" + val[i] + ">nihao:" + val[i] + "</div>";
jQuery("#h").append(tmp);
/*
$("#" + val[i]).click(function(){
alert(":" + i);
$(this).hide();
});
*/
}
$(".divclass").on("click", function(){
$(".divclass").hide();
})
});
}); </script>
</head> <body>
<div id="h">
<button id="button1">hihi</button>
</body>
</html>
jQuery对新添加的控件添加响应事件的更多相关文章
- 【VS开发】动态添加的ActiveX控件如何响应事件
http://blog.csdn.net/xiaoqiqixiao/article/details/574542 今天在csdn上看到一朋友问如何响应动态添加的控件的事件,搜索资料,发现对于一般的应用 ...
- Qt项目ui文件中新添加的控件在代码中不识别的问题解决
今天在学Qt框架的信号槽,然后发现在ui中加的控件,通过ui-> 找不到,没有识别,于是上网查找了一下问题 解决方法 添加ui控件后,执行程序,退出程序,将debug目录下的ui_XXXX.h拷 ...
- C# 给Word文档添加内容控件
C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word ...
- 【C#】使用IExtenderProvider为控件添加扩展属性,像ToolTip那样
申明: - 本文适用于WinForm开发 - 文中的“控件”一词是广义上的说法,泛指包括ToolStripItem.MenuItem在内单个界面元素,并不特指继承自Control类的狭义控件 用过To ...
- 如何添加地图控件到Windows Phone 8的页面中
原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...
- 如何给动态添加的form表单控件添加表单验证
最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...
- 动态地添加HTML控件-JavaScript基础
相关: document对象的createElement()方法可以创建一个新的HTML控件(document.createElement("input");) setAttrib ...
- VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)
上一节中鸡啄米讲了为Ribbon Bar添加控件的方法.本节教程鸡啄米将继续完善前面的实例,讲解一些稍复杂的控件的添加方法,及如何为它们添加消息处理函数. 一.为Ribbon Bar添加更多Ribbo ...
- MFC中给控件添加变量,DoDataExchange中
DoDataExchange函数其实是一项数据动态绑定技术.比如你在写动态按钮过程中须对按钮添加变量时,怎么添加?控件类已经写好了,其变量是已经固定的.你要添加新的变量就要用到DoDataExchan ...
随机推荐
- svn下载安装
TortoiseSVN 下载地址:http://subversion.apache.org/packages.html#windows VisualSVN Server 下载地址:https://ww ...
- 为什么要引入zookeeper系统
为什么要引入zookeeper系统?这篇文章将说明几个引入zookeeper的原因,首先,先对zookeeper做一个简单的介绍. zookeeper是hadoop下的一个子项目,它是一个针对大型分布 ...
- 如何彻底删除TFS上的团队项目 For VS 2017
参考 Visual Studio 2017 TFSDeleteProject.exe 位置 X:\Program Files (x86)\Microsoft Visual Studio\2017\En ...
- WinForm中TabControl的使用
TabControl和TabPage之间有一个默认颜色的边框,很难去除,需要重写TabControl控件重绘区域 public class FullTabControl : TabControl { ...
- Android学习笔记 Gallery图库组件的使用
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- Jmeter的主要元件及元件的执行顺序
一.JMeter的主要元素 1.Test Pan(测试计划) Jmeter中的测试计划包括一个或者一组的测试用例,一个Thread Group可以认为是一个测试用例,一个测试计划中可以包括多个Thre ...
- JAVA学习必须掌握的框架,不看后悔
Web应用,最常见的研发语言是Java和PHP. 后端服务,最常见的研发语言是Java和C/C++. 大数据,最常见的研发语言是Java和Python. 可以说,Java是现阶段中国互联网公司中,覆盖 ...
- MyBatis与Hibernate比较
MyBatis: 1.是一个sql语句映射的框架(工具). 2.注重pojo与sql之间的映射关系.不会为程序员在运行期自动生成sql 3.自动化程度低,手工映射sql灵活程度高 4.需要开发人员熟练 ...
- [jvm] JVM体系结构
一.jvm 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存(非JVM区域) 二.深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全 ...
- (STM32F4) Real-time Clock
老實說Real-time Clok這項功能,我也只有在PC和手機上有見過,其他的應用產品上我也很少見到. 言歸正傳在STM32F4 RTC這項功能在IC內部就有內建,在早期的8051是如果要做RCT是 ...