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. cinder侧卸载卷流程分析

    cinder侧卸载卷分析,存储类型以lvm+iscsi的方式为分析基础在虚机卸载卷的过程中,主要涉及如下三个函数1)cinder.volume.api.begin_detaching 把volume的 ...

  2. Struts2学习第2天--Struts2的Servlet的API的访问 Struts2的结果页面的配置 Struts2的数据的封装（包括复杂类型）

    启动后访问jsp 输入姓名密码: 提交后跳转打action 打印: 修改类: 配置同上 结果同上. 实现这俩接口 就得到了 以上代码附上: struts.xml: <?xml version=& ...

  3. 移动端复制粘贴clipboardjs

    官方网址: https://clipboardjs.com/ 不能一打开就直接触发复制粘贴: 参考博客: http://blog.csdn.net/twoByte/article/details/52 ...

  4. Python数组(二)

    一.函数list 可将任何序列(如字符串)作为list的参数.list实际上是一个类,而不是函数. test=['java','C#','C','C++'] print(list(test)) ——& ...

  5. 浅谈PHP的Public、Protected、Private三种方法的区别

    public:权限是最大的,可以内部调用,实例调用等.protected: 受保护类型,用于本类和继承类调用.private: 私有类型,只有在本类中使用. <?php error_report ...

  6. js appendChild与insertBefore 区别和用法

      1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点. 比如:appendChild(newchild)括号里可以是创建的标签var newchild = docume ...

  7. python学习，day1：循环判断基本语句的几个代码

    # coding=utf-8 # Author: RyAn Bi count = 0 '''while True : print('count:',count) count = count + 1 i ...

  8. AC自动机例题

    P3808 [模板]AC自动机(简单版) [题目描述] 给定n个模式串和1个文本串,求有多少个模式串在文本串里出现过. #include<bits/stdc++.h> using name ...

  9. [BZOJ 5330][SDOI2018] 反回文串

    传送门 怎么说呢,一道不可多得的反演题吧,具体解释之后再补 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) ...

  10. Luogu P1052 过河 DP

    复习复习DP...都忘了QAQ... 好了这道题我其实是看题解才会的... 方程 f[i]=min(f[i-j]+v[i]) v[i]表示i是不是石头 s<=j<=t 路径压缩引用一下证明 ...