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. 华硕X550VC安装ubuntu后wifi无法连接问题

    在网上找了很多资料比如重新编译内核,想办法连上有线网络然后更新驱动,下载离线驱动安装包…… 等等方法 其中有些方法实际测试的时候失败了,文章是几年前的,可能缺少某些依赖.上个网都这么麻烦实在让人疲惫. ...

  2. 微信H5或PC支付常见问题汇总

    1.H5端调起支付,直接提示[支付失败],打印具体的信息,“<当前URL不存在>” 原因: ①.[支付授权目录不对]---查看微信商户平台的支付授权目录的地址,如果MVC结构的,则只需填写 ...

  3. VS2010 UAC执行级别修改

    配置属性 -> 链接器 -> 清单文件 -> UAC执行级别 改为 requireAdministrator 这个级别即可.

  4. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  5. 2. C/C++笔试面试经典题目二

    1. C和C++中struct有什么区别? [参考答案] [解析]C中的struct没有保护行为,没有public,private,protected,内部不能有函数,但可以有函数指针. 2. C++ ...

  6. SDUT OJ 数据结构实验之二叉树七：叶子问题

    数据结构实验之二叉树七:叶子问题 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  7. 关于Execel 2007 连接到 hive odbc

    官方给出的都是 2010 或2012版的连接方案,看起来与2007有些不同,但我相信这些功能都是通用的. 下载 odbc hive 驱动.http://hortonworks.com/products ...

  8. html基础知识，整理

    # HMTL 基础知识 ###查看网页源代码吗 ``` ctrl + u``` ###dom元素 一个标签即代表一个dom元素 ###dom元素属性 ``` <p id ="first ...

  9. springcloud微服务config的使用

    首先需要建立一个server端: pom依赖中加入 <dependency> <groupId>org.springframework.cloud</groupId> ...

  10. springcloud微服务总结四 负载均衡

    一:Ribbon简介 Ribbon是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TCP客户端的一些行为 ...