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对新添加的控件添加响应事件的更多相关文章

  1. 【VS开发】动态添加的ActiveX控件如何响应事件

    http://blog.csdn.net/xiaoqiqixiao/article/details/574542 今天在csdn上看到一朋友问如何响应动态添加的控件的事件,搜索资料,发现对于一般的应用 ...

  2. Qt项目ui文件中新添加的控件在代码中不识别的问题解决

    今天在学Qt框架的信号槽,然后发现在ui中加的控件,通过ui-> 找不到,没有识别,于是上网查找了一下问题 解决方法 添加ui控件后,执行程序,退出程序,将debug目录下的ui_XXXX.h拷 ...

  3. C# 给Word文档添加内容控件

    C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word ...

  4. 【C#】使用IExtenderProvider为控件添加扩展属性,像ToolTip那样

    申明: - 本文适用于WinForm开发 - 文中的“控件”一词是广义上的说法,泛指包括ToolStripItem.MenuItem在内单个界面元素,并不特指继承自Control类的狭义控件 用过To ...

  5. 如何添加地图控件到Windows Phone 8的页面中

    原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

  6. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  7. 动态地添加HTML控件-JavaScript基础

    相关: document对象的createElement()方法可以创建一个新的HTML控件(document.createElement("input");) setAttrib ...

  8. VS2010/MFC编程入门之五十四(Ribbon界面开发:使用更多控件并为控件添加消息处理函数)

    上一节中鸡啄米讲了为Ribbon Bar添加控件的方法.本节教程鸡啄米将继续完善前面的实例,讲解一些稍复杂的控件的添加方法,及如何为它们添加消息处理函数. 一.为Ribbon Bar添加更多Ribbo ...

  9. MFC中给控件添加变量,DoDataExchange中

    DoDataExchange函数其实是一项数据动态绑定技术.比如你在写动态按钮过程中须对按钮添加变量时,怎么添加?控件类已经写好了,其变量是已经固定的.你要添加新的变量就要用到DoDataExchan ...

随机推荐

  1. svn下载安装

    TortoiseSVN 下载地址:http://subversion.apache.org/packages.html#windows VisualSVN Server 下载地址:https://ww ...

  2. 为什么要引入zookeeper系统

    为什么要引入zookeeper系统?这篇文章将说明几个引入zookeeper的原因,首先,先对zookeeper做一个简单的介绍. zookeeper是hadoop下的一个子项目,它是一个针对大型分布 ...

  3. 如何彻底删除TFS上的团队项目 For VS 2017

    参考 Visual Studio 2017 TFSDeleteProject.exe 位置 X:\Program Files (x86)\Microsoft Visual Studio\2017\En ...

  4. WinForm中TabControl的使用

    TabControl和TabPage之间有一个默认颜色的边框,很难去除,需要重写TabControl控件重绘区域 public class FullTabControl : TabControl { ...

  5. Android学习笔记 Gallery图库组件的使用

    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...

  6. Jmeter的主要元件及元件的执行顺序

    一.JMeter的主要元素 1.Test Pan(测试计划) Jmeter中的测试计划包括一个或者一组的测试用例,一个Thread Group可以认为是一个测试用例,一个测试计划中可以包括多个Thre ...

  7. JAVA学习必须掌握的框架,不看后悔

    Web应用,最常见的研发语言是Java和PHP. 后端服务,最常见的研发语言是Java和C/C++. 大数据,最常见的研发语言是Java和Python. 可以说,Java是现阶段中国互联网公司中,覆盖 ...

  8. MyBatis与Hibernate比较

    MyBatis: 1.是一个sql语句映射的框架(工具). 2.注重pojo与sql之间的映射关系.不会为程序员在运行期自动生成sql 3.自动化程度低,手工映射sql灵活程度高 4.需要开发人员熟练 ...

  9. [jvm] JVM体系结构

    一.jvm 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存(非JVM区域) 二.深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全 ...

  10. (STM32F4) Real-time Clock

    老實說Real-time Clok這項功能,我也只有在PC和手機上有見過,其他的應用產品上我也很少見到. 言歸正傳在STM32F4 RTC這項功能在IC內部就有內建,在早期的8051是如果要做RCT是 ...