未来元素，创造元素。
很多情况下，多注意版本的要求，有些元素已经去除，不再使用
首先是HTML代码：
<style> .div1 { 100px; height: 100px; background-color: red; float: left; margin: 10px 10px; } .div4 { 500px; height:500px; background-color:red; } .div5 { 300px; height:300px; background-color:blue; } .div6 { 100px; height:100px; background-color:black; } </style> </head> <body> <form id="form1" runat="server"> <input type="button" value="创造" id="btn1" /><br /> <br /> <%-- <div id="ddd"> <div class="div1"></div> //未来元素实例 </div>--%> <%-- //冒泡--%> <div class="div4"> <div class="div5"> <div class="div6"></div> </div> </div> </form> </body> </html>
下面是JS代码：
<script>
//未来元素，在页面点击创造，就会出来多个div
$("#btn1").click(function () {
$("#ddd").html($("#ddd").html() + '<div class="div1"></div>');
});
////版本低的用这个 可以用live代替，但是要注意jquery的版本,根据官方文档，从1.7开始就不推荐live和delegate了，1.9里就去掉live了。
$(".div1").live("click", function () {
alert("aaa");
});
//版本高的1.11.1
//这里是创建出来的未来元素，用document 后面on 里面是 三个内容 click,选择器，方法
$(document).on("click", ".div1", function () {
alert("aaa");
});
//事件冒泡： 之前用js不能用return false 这里能用
$(".div4, .div5, .div6").click(function () {
alert("aaa");
return false;
});
</script>