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. Ext.Net安装和应用

    1.最新版本 2.打开文件,将包含以下文件:   Ext.Net.dll  Ext.Net.Utilities.dll  Ext.Net.xml  Newtonsoft.Json.dll  Newto ...

  2. swagger接口文档

    1 在Visual Studio 中创建一个Asp.NET  WebApi 项目,项目名:Com.App.SysApi(本例创建的是 .net 4.5 框架程序) 2  打开Nuget 包管理软件,查 ...

  3. 为什么 kubernetes 天然适合微服务 （3）

    此文已由作者刘超授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 四.Kubernetes 本身就是微服务架构 基于上面这十个设计要点,我们再回来看 Kubernetes,会发现 ...

  4. c++最短路经典问题

    一提起最短路,各位oier会想到什么呢? floyd,spfa,dij,或是bellman-ford? 其实,只要学会一种算法,大部分最短路问题就能很快解决了. 他就是堆优化的dijkstra. 首先 ...

  5. 1232: 买不到的数目 [DP、数学]

    1232: 买不到的数目 [DP.数学] 时间限制: 1 Sec 内存限制: 128 MB 提交: 21 解决: 10 统计 题目描述 小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的 ...

  6. 洛谷P2762 太空飞行计划问题（最小割）

    传送门 我们可以把实验放在左边,仪器放在右边,点有点权,然后连对应的有向边,就是求一个最大权闭合图,可以转化为最小割来做(关于这具体是个啥……可以百度胡伯涛<最小割模型在信息学竞赛中的应用> ...

  7. DRF 的解析器和渲染器

    一.解析器 解析器作用 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己可以处理的数据.本质就是对请求体中的数据进行解析. 在了解解析器之前,我们要先知道Accept以及ContentT ...

  8. P2252 取石子游戏 威佐夫博弈

    $ \color{#0066ff}{ 题目描述 }$ 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆 ...

  9. [HAOI2011]Problem b BZOJ2301 数学

    题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...

  10. 6、C++共用体

    6.共用体 共用体(union)是一种数据格式,他能够存储不同的数据类型,但只能同时存储其中的一种类型.也就是说,结构可以同时存储int.long和double,共用体只能存储ing.long.dou ...