从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. 在 Mac OS 上创建并运行 ASP.NET Core 1.0 网站

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  2. Python 学习---------Ｄay1

    第一章 问答环节一．人们为何使用Python 软件质量 开发者的效率 程序的可移植性 标准库的支持 组件集成 享受乐趣二．Python的缺点 Python唯一的缺点就是:与C/C++这类编译语言相比, ...

  3. java-7311练习(上)

    java练习,仅供参考! 欢迎同学们交流讨论. JDK 1.8 API帮助文档 JDK 1.6 API中文文档 Java GUI -------------------------2016-10-23 ...

  4. 微信小程序免费SSL证书https、TLS版本问题的解决方案

    微信小程序与第三方服务器通讯的域名5个必要条件1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口2.加ssl证书,也就是https://~~~4.HTTPS 服务器 ...

  5. Android ImageView高度根据图片比例自适应

    设置adjustViewBounds // 是否保持宽高比 <ImageView android:id="@+id/iv_test" android:layout_width ...

  6. iOS进阶_动画的多种实现方式

    一.UIView动画 //UIView动画有开始beginAnimation,有结束commitAnimation    //第一步:开始UIView动画    [UIView beginAnimat ...

  7. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  8. vim 配置

    backspace有几种工作方式,默认是vi兼容的.对新手来说很不习惯.对老vi 不那么熟悉的人也都挺困扰的.可以用set backspace=indent,eol,start来解决. indent: ...

  9. 搭建 SubversionEdge for VS

    1. 需要软件 SubversionEdge , AnkhSvn,TortoiseSVN: 2. 安装3个软件,一路Next 3. 安装完SubversionEdge 后,会打开一个网页http:// ...

  10. SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好？

    SQLSERVER 里SELECT COUNT(1) 和SELECT COUNT(*)哪个性能好? 今天遇到某人在我以前写的一篇文章里问到 如果统计信息没来得及更新的话,那岂不是统计出来的数据时错误的 ...