Jquery未来元素，非常重要

未来元素，创造元素。

很多情况下，多注意版本的要求，有些元素已经去除，不再使用

首先是HTML代码：

    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 10px 10px;
        }
        .div4 {
            width:500px;
            height:500px;
            background-color:red;
        }
         .div5 {
            width:300px;
            height:300px;
            background-color:blue;
        }
          .div6 {
            width: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>

 

posted @ 2017-08-28 21:15  小程序员//  阅读(361)  评论(0)  编辑  收藏  举报