测试动态添加的元素 绑定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>