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>
