jQuery对新添加的控件添加响应事件
2023-09-27 14:25:21 时间
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操作Select
- jQuery VS AngularJS 你更钟爱哪个?
- jquery ajax jsonp跨域调用实例代码
- jquery:上传文件
- Jquery控制滚动Div 滚动条事件
- 十五个常用的jquery代码段
- jquery监听动态添加的input的change事件
- jquery播放视频事件
- javascript,jquery在父窗口触发子窗口(iframe)某按钮的click事件
- 不使用jQuery对Web API接口POST,PUT,DELETE数据
- 学习jQuery的事件dblclick
- A customized combobox with JQuery
- jquery获取复选框的值
- JQuery第三天——CSS操作与JQuery事件
- jquery判断单选按钮radio是否选中的方法
- jQuery 旋转插件 jqueryrotate 用法详解
- JavaScript 事件托付 以及jQuery对事件托付的支持
- jquery事件之select选中事件
- 兼容IE与firefox火狐的回车事件(js与jquery)
- 一款基于jquery的手风琴图片展示效果
- 简单讨论一下 jQuery 事件
- jquery键盘事件总结
- ASP.NET core webapi jquery请求 _平台:windows (7)
- 用JQUERY为INPUT的TXT类型赋值及取值操作
- JS与Jquery的事件委托
- 鼠标悬浮事件 -jQuery hover()方法(layer.js)(layer.tips)