从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>
View Code
$(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")); });
