测试动态添加的元素 绑定jQuery绑定on事件

测试动态添加的元素 绑定jQuery绑定on事件

背景：
live方法在1.7中已经不建议使用，在1.9中删除了这个方法

    <title>测试动态添加的元素 绑定jQuery绑定on事件（on的用法）</title>
    <!---->
    <!---->
    <!--
    -->
	
    
        $(document).on("click", '.clickEve', function () {
            console.log($(this));
            alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id"));
        });

        // 开心洋葱测试多个事件绑定同一个函数
        $(document).on("mouseover    mouseout  ", '.clickEve', function () {
            alert("开心洋葱测试多个事件绑定同一个函数");
        });

        //写法一：开心洋葱测试多个事件绑定不同函数
        var data = { id: 5, name: "张三" };
        var events = {
            "mouseover": function (event) {
                alert("写法一mouseover=======" + event.data.name);
            },
            "mouseout  ": function (event) {
                alert("写法一mouseout");
            }
        };
        //为类".clickEve"绑定mouseenter mouseleave两个事件，并为其传入附加数据data
        $(document).on(events, ".clickEve", data);

        //写法二:开心洋葱测试多个事件绑定不同函数
        $(document).on({
            "mouseover  ": function () { alert("写法二：开心洋葱测试多个事件绑定不同函数mouseover"); },
            "mouseout  ": function () { alert("写法二：开心洋葱测试多个事件绑定不同函数mouseout"); },
            "click": function () { alert("写法二：开心洋葱测试多个事件绑定不同函数click"); }
        }, ".clickEve");

        $(function () {
			//var abc = "test";
			//alert($("#"+abc+" .aa").attr("data"));

            var htmlArry = [];
            for (var i = 0; i < 20; i++) {
                htmlArry.push("<br /><br /><br />");
            }
            var html = htmlArry.join('');
            console.log(html);
            $("#test").append(html);
        });
    


    <div id="test">
	
	
        
        <br />
        <br />
        <br />
    </div>