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. winform panel显示子窗体

    private void ZiChuangTi() {//确认当前为子窗体 this.IsMdiContainer = true; //建立个子窗体的对象 Son mySon = new Son(); ...

  2. EasyUI控件combobox重复请求后台，dialog窗口数据异常

    最近在用Easy UI+Dapper+MVC4 开发一个财务收款系统,其中就发现一些小问题,供有需要的人参考. 1.EasyUI控件combobox 数据绑定 出现重复请求后台 上代码: <td ...

  3. mysql sp 练习游标和预编译

    create procedure Jack_count_cur_dual() BEGIN ); ; DECLARE mycur CURSOR for SELECT table_name FROM tt ...

  4. .NET平台的资源文件管理

    可以管理文本.图片等不同类型的资源 管理方式(增删改) 可以直接修改XXX.resx源文件(XML格式,文本直接管理内容,图片需要指定路径,资源名和图片名可以不同) 也可以在VS的可视化界面上进行操作 ...

  5. 生成MySql数据库的数据字典代码参考

    Code: /** * 生成mysql数据字典 */ //配置数据库 $dbserver = "127.0.0.1"; $dbusername = "root" ...

  6. 题解 P4140 【奇数国 】

    题目链接 首先,按照题意,把前$60$个素数打出来$[2$ $-$ $281]$. 因为只有$60$个,再加上本宝宝极其懒得写线性筛于是每一个都$O(\sqrt{n})$暴力筛就好了. 代码如下: # ...

  7. jvm学习笔记之对象详解

    一.对象的组成 对象头(Header): 运行时数据:存储对象运行时的数据,如哈希码.GC分代年龄.锁状态标志.线程持有的锁.偏向线程ID.偏向时间戳等,这部分数据官方成为“Mark Word”,它的 ...

  8. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

  9. Unity---动画系统学习(5)---使用MatchTarget来匹配动画

    1. 介绍 做好了走.跑.转弯后,我们就需要来点更加高级的动画了. 我们使用自带动画学习笔记2中的FQVault动画,来控制人物FQ. 在动画学习笔记4的基础上添加Vault动画. 添加一个参数Vau ...

  10. C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法

    本文实例讲述了C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法.分享给大家供大家参考.具体如下: 这个类不是我实现的,英文原文地址为http://www.egg ...