从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")); });