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>