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. 执行存储过程比即时SQL执行慢的解决方案

    发生过这样一件事, 写了一个SQL,查询数据大概5秒,但是放到存储过程里面去了过后,查了5分钟也没给出结果,后来网上找解决方案,终于找到一个解决方案. 在存储过程的参数那里对参数进行一个传递.反正他们 ...

  2. js实现深拷贝

    type函数 首先我们要实现一个getType函数对元素进行类型判断,直接调用Object.prototype.toString 方法. function getType(obj){ //tostri ...

  3. <select>标签默认值设置

    <td> <label>操作类型:</label> <select id="operation_type" class="com ...

  4. ecliplse里tomcat正常启动后http://localhost:8080/报错404

    如下图所示,新建一个工作区间,添加tomcat之后通过ecliplse启动tomcat之后: 访问http://localhost:8080/出现404: 解决方法: 1.确保tomcat里面所有项目 ...

  5. UI控件的位置

    1.该位置指的是本控件的中心点位于点 (100, 100)上(不包含尺寸),可以用于中心对齐在使用frame设置位置的情况下 self.view.center = CGPointMake(100, 1 ...

  6. Mysql初识数据库《三》数据库概述

    1 什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 在计算机中描述一个事物 ...

  7. 查看linux操作系统的版本等信息

    1.查看操作系统是32位还是64位的命令: (1)getconf LONG_BIT (2)uname -a (3)uname -m (4)arch (5)file /sbin/init 2.查看操作系 ...

  8. Python之路系列：面向对象初级：静态属性、静态方法、类方法

    一.静态属性 静态属性相当于数据属性. 用@property语法糖装饰器将类的函数属性变成可以不用加括号直接的类似数据属性. 可以封装逻辑,让用户感觉是在调用一个普通的数据属性. 例子: class ...

  9. 洛谷 P2096 最佳旅游线路

    某旅游区的街道成网格状.其中东西向的街道都是旅游街,南北向的街道都是林阴道.由于游客众多,旅游街被规定为单行道,游客在旅游街上只能从西向东走,在林阴道上则既可从南向北走,也可以从北向南走. 阿龙想到这 ...

  10. 使用TortoiseSVN新建及合并分支图文教程

    打开trunks目录,在trunks目录下新建两个文本文件A.java,B.java:   打开A.java输入以下内容: B.java文件可以随机输入些,本例中主要用于观察后续是否变化. 两个文件编 ...