jQuery对 动态添加 的元素 绑定事件(on()的用法)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery对 动态添加 的元素 绑定事件(on()的用法)相关的知识,希望对你有一定的参考价值。

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法。

当浏览器下载完一个页面的时候就开始渲染(翻译)html标签,然后执行css、js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来绑定事件 $(document).on("click", ‘.clickEve‘, function () { console.log($(this)); alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id")); }); 其中".clickEve" 类选择器。

下面完整的测试代码:

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>测试动态添加的元素 绑定jQuery绑定on事件(on的用法)</title>
 5     <!--<script src="Js/jquery-2.1.4.min.js" type="text/javascript"></script>-->
 6     <!--<script src="Js/jquery-1.11.3.min.js" type="text/javascript"></script>-->
 7     <!--<script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>-->
 8     <script src="Js/jquery-1.8.3.min.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         $(document).on("click", .clickEve, function () {
11             console.log($(this));
12             alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id"));
13         });
14 
15         // 多个事件绑定同一个函数
16         $(document).on("mouseover mouseout", .clickEve, function () {
17             alert("多个事件绑定同一个函数");
18         });
19 
20         //写法一:多个事件绑定不同函数
21         var data = { id: 5, name: "张三" };
22         var events = {
23             "mouseover": function (event) {
24                 alert("写法一mouseover=======" + event.data.name);
25             },
26             "mouseout": function (event) {
27                 alert("写法一mouseout");
28             }
29         };
30         //为类".clickEve"绑定mouseenter mouseleave两个事件,并为其传入附加数据data
31         $(document).on(events, ".clickEve", data);
32 
33         //写法二:多个事件绑定不同函数
34         $(document).on({
35             mouseover: function () { alert("写法二:多个事件绑定不同函数mouseover"); },
36             mouseout: function () { alert("写法二:多个事件绑定不同函数mouseout"); },
37             click: function () { alert("写法二:多个事件绑定不同函数click"); }
38         }, ".clickEve");
39 
40         $(function () {
41             var htmlArry = [];
42             for (var i = 0; i < 20; i++) {
43                 htmlArry.push("<input type=‘button‘ id=‘" + i + "‘ class=‘clickEve‘ value=‘测试jquery on事件对 动态添加HTML元素 是否 启作用" + i + "‘ /><br/><br/><br/>");
44             }
45             var html = htmlArry.join(‘‘);
46             console.log(html);
47             $("#test").append(html);
48         });
49     </script>
50 </head>
51 <body>
52     <div id="test">
53         <input type="button" id="-1" class="clickEve" value="测试jquery on事件对 动态添加HTML元素 是否 启作用" />
54         <br />
55         <br />
56         <br />
57     </div>
58 </body>
59 </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, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

以上是关于jQuery对 动态添加 的元素 绑定事件(on()的用法)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery给动态添加的元素绑定事件的方法

jquery on()绑定的点击事件在js动态新添加的元素上无效,请问为啥

jquery on()绑定的点击事件在js动态新添加的元素上无效

jquery动态添加元素无法触发绑定的事件的解决方案

Jquery动态绑定事件处理函数 bind / on / delegate

js 为动态添加的元素绑定事件