从jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法。
当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签，然后执行css、js代码，在执行js代码的时候就注册了相应绑定的事件，我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 }); 但是对用js动态添加的元素 是无效的，即没有绑定单击事件，所以对于动态添加的标签需要用on()来绑定事件 $(document).on("click touchstart", '.clickEve', function () { console.log($(this)); alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id")); }); 其中".clickEve" 类选择器。
下面完整的测试代码：
1 <!DOCTYPE html > 2 <head> 3 <title>测试动态添加的元素 绑定jQuery绑定on事件（on的用法）</title> 4 <!--<script src="Js/jquery-2.1.4.min.js" type="text/javascript"></script>--> 5 <!--<script src="Js/jquery-1.11.3.min.js" type="text/javascript"></script>--> 6 <!--<script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>--> 7 <script src="Js/jquery-1.8.3.min.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 $(document).on("click", '.clickEve', function () { 10 console.log($(this)); 11 alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id")); 12 }); 13 14 // 多个事件绑定同一个函数 15 $(document).on("mouseover mouseout ", '.clickEve', function () { 16 alert("多个事件绑定同一个函数"); 17 }); 18 19 //写法一：多个事件绑定不同函数 20 var data = { id: 5, name: "张三" }; 21 var events = { 22 "mouseover": function (event) { 23 alert("写法一mouseover=======" + event.data.name); 24 }, 25 "mouseout ": function (event) { 26 alert("写法一mouseout"); 27 } 28 }; 29 //为类".clickEve"绑定mouseenter mouseleave两个事件，并为其传入附加数据data 30 $(document).on(events, ".clickEve", data); 31 32 //写法二:多个事件绑定不同函数 33 $(document).on({ 34 "mouseover ": function () { alert("写法二：多个事件绑定不同函数mouseover"); }, 35 "mouseout ": function () { alert("写法二：多个事件绑定不同函数mouseout"); }, 36 "click": function () { alert("写法二：多个事件绑定不同函数click"); } 37 }, ".clickEve"); 38 39 $(function () { 40 var htmlArry = []; 41 for (var i = 0; i < 20; i++) { 42 htmlArry.push("<input type='button' id='" + i + "' class='clickEve' value='测试jquery on事件对 动态添加HTML元素 是否 启作用" + i + "' /><br/><br/><br/>"); 43 } 44 var html = htmlArry.join(''); 45 console.log(html); 46 $("#test").append(html); 47 }); 48 </script> 49 </head> 50 <body> 51 <div id="test"> 52 <input type="button" id="-1" class="clickEve" value="测试jquery on事件对 动态添加HTML元素 是否 启作用" /> 53 <br /> 54 <br /> 55 <br /> 56 </div> 57 </body> 58 </html>
$(document).on(event,childSelector,data,function,map)的参数说明：
event：必需。规定添加到元素的一个或多个事件。事件的类型包含： blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error等，由空格分隔多个事件值。必须是有效的事件。
childSelector：需要绑定事件的标签的ID、类、属性选择器
data：触发事件需要传入的数据，可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。
map：可选，规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
兼容性：
在手机上建议使用 "touchstart" ，如果不使用在iOS上是没有反应的：
例如：$(document).on("touchstart", '.clickEve', function () { console.log($(this)); alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id")); });