jquery html动态添加的元素绑定事件详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery html动态添加的元素绑定事件详解相关的知识，希望对你有一定的参考价值。
参考技术A 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况：<div
id="testdiv">
<ul></ul>
</div>
假设我们要给ul动态添加的<li>绑定click事件形成如下结果
<div
id="testdiv">
<ul>
<li
name="apple">apple</li>
<li
name="pear">pear</li>
</ul>
</div>
<script>
function
test(name)
alert("I'm
"+name);
//做法如下:
$("#testdiv
ul").on("click","li",
function()
//test($(this).attr("name"));
//do
something
here
);
//主动触发某个<li>的click事件
//
$("#testdiv
ul
li[name='apple']").trigger("click");
</script>
以上这篇jquery
html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
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>
$(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 html动态添加的元素绑定事件详解的主要内容，如果未能解决你的问题，请参考以下文章