从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. Maven使用第三方jar文件的两种方法

    转于http://blog.csdn.net/youhaodeyi/article/details/1729116 主要用于回查与标记 在Maven中,使用第三方库一般是通过pom.xml文件中定义的 ...

  2. Ubuntu 14.04 配置静态IP

    命令行手工配置静态IP比较麻烦,记录于此备查. 1,ubuntu的网络配置文件在: # /etc/network/interfaces //这个文件里 2,默认安装时,网络配置是使用DHCP自动分配I ...

  3. Java学习笔记三——数据类型

    前言 Java是强类型(strongly typed)语言,强类型包含两方面的含义: 所有的变量必须先声明后使用: 指定类型的变量只能接受预支匹配的值. 这意味着每一个变量和表达式都有一个在编译时就确 ...

  4. [原] XAF 如何启用ListView Top N records 提升用户使用体验

    為了提升用戶使用體驗,特擴展此功能(來源與Xafari Framework).1.可在模型編輯器中設置是否啓用,默認啓用.2.DataAccessMode為Client模式才啓用.其它模式自動關閉.3 ...

  5. LintCode 392 House Robber

    // Ref: https://segmentfault.com/a/1190000003811581// Ref: http://www.cnblogs.com/grandyang/p/438363 ...

  6. 解决 504 Gateway Time-out和502 Bad Gateway(nginx)

    504 Gateway Time-out 问题所在: 所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的fastcgi进程响应的缓 ...

  7. Erlang在Windows上开发环境搭建全过程讲解目录

    我会按照下面的列表来一步一步讲解,在windows来开发Erlang所用到的一些工具,和知识.我会不停的添加和修正. Erlang运行时环境 Erlang开发工具选择 Rebar来构建,编译,测试,发 ...

  8. IO-04. 混合类型数据格式化输入(5)

    本题要求编写程序,顺序读入浮点数1.整数.字符.浮点数2,再按照字符.整数.浮点数1.浮点数2的顺序输出. 输入格式: 输入在一行中顺序给出浮点数1.整数.字符.浮点数2,其间以1个空格分隔. 输出格 ...

  9. Xml文件并发读写的解决方法

    之前对xml的操作大都是通过XmlDocument对象来进行,但是这样的情况对于没有并发的是非常合适的,最近遇到了并发读写xml文件的情况.通过文件流来操作能解决大部分的并发情况,对于极端的情况会有问 ...

  10. ASP.NET 4.5.256 has not been registered on the Web server. You need to manually configure your Web server for ASP.NET 4.5.256 in order for your site to run correctly

    Microsoft .NET Framework 4.6安装后,用户可能会在使用Microsoft Visual Studio 创建(或打开现有项目时)网站.或Windows Azure项目时遇到下面 ...