从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" 类选择器。

下面完整的测试代码：

 <!DOCTYPE html >

 <head>

     <title>测试动态添加的元素 绑定jQuery绑定on事件（on的用法）</title>

     <!--<script src="Js/jquery-2.1.4.min.js" type="text/javascript"></script>-->

     <!--<script src="Js/jquery-1.11.3.min.js" type="text/javascript"></script>-->

     <!--<script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>-->

     <script src="Js/jquery-1.8.3.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).on("click", '.clickEve', function () {

             console.log($(this));

             alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id"));

         });

         // 多个事件绑定同一个函数

         $(document).on("mouseover    mouseout  ", '.clickEve', function () {

             alert("多个事件绑定同一个函数");

         });

         //写法一：多个事件绑定不同函数

         var data = { id: 5, name: "张三" };

         var events = {

             "mouseover": function (event) {

                 alert("写法一mouseover=======" + event.data.name);

             },

             "mouseout  ": function (event) {

                 alert("写法一mouseout");

             }

         };

         //为类".clickEve"绑定mouseenter mouseleave两个事件，并为其传入附加数据data

         $(document).on(events, ".clickEve", data);

         //写法二:多个事件绑定不同函数

         $(document).on({

             "mouseover  ": function () { alert("写法二：多个事件绑定不同函数mouseover"); },

             "mouseout  ": function () { alert("写法二：多个事件绑定不同函数mouseout"); },

             "click": function () { alert("写法二：多个事件绑定不同函数click"); }

         }, ".clickEve");

         $(function () {

             var htmlArry = [];

             for (var i = 0; i < 20; i++) {

                 htmlArry.push("<input type='button' id='" + i + "' class='clickEve' value='测试jquery on事件对 动态添加HTML元素 是否 启作用" + i + "' /><br/><br/><br/>");

             }

             var html = htmlArry.join('');

             console.log(html);

             $("#test").append(html);

         });

     </script>

 </head>

 <body>

     <div id="test">

         <input type="button" id="-1" class="clickEve" value="测试jquery on事件对 动态添加HTML元素 是否 启作用" />

         <br />

         <br />

         <br />

     </div>

 </body>

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

jQuery对 动态添加 的元素 绑定事件（on()的用法）的更多相关文章

  1. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  2. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  3. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

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

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  5. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  6. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

  7. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  8. jQuery中如何给动态添加的元素绑定事件

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

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

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

随机推荐

  1. oracle 小题

    create table student(sno varchar2(10) primary key,sname varchar2(20),sage number(2),ssex varchar2(5) ...

  2. java线程小结3

    1. 多线程概述 要实现多线程可以通过继承Thread和实现Runnable接口.不过这两者之间存在一些区别.其中最重要的区别就是,如果一个类继承Thread类,则不适合于多个线程共享资源,而实现了R ...

  3. NPOI创建DOCX常用操作【转】

    1.  创建文档 XWPFDocument m_Docx = new XWPFDocument();2.  页面设置 //1‘=1440twip=25.4mm=72pt(磅point)=96px(像素 ...

  4. Web系统大规模并发——电商秒杀与抢购 【转】

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  5. Centos 反向代理创建资料

    1. yum update 2. sh centos.sh 3. sh upgrade_nginx.sh nginx 1.7.0 4. cd /usr/local/nginx/conf/ upload ...

  6. java-7311练习(下)

    java练习,仅供参考! 欢迎同学们交流讨论. JDK 1.8 API帮助文档 JDK 1.6 API中文文档 第一次小组作业:模拟双色球彩票 第一次小组作业(一) 控制台版 游戏规则: • 双色球为 ...

  7. GIT FLOW 时序图

    git flow sequence md link: git branching model master->master branch: use default branch Note rig ...

  8. hdu acm 1425 sort(哈希表思想)

    sort Time Limit: 6000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. MySQL的limit查询优化

    MySQL的limit查询优化以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的.其他最为常用也是最为需要优化的就是limit.MySQ ...

  10. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...