从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. 基于Chrome内核（WebKit.net）定制开发DoNet浏览器

    1.    源起 a)     定制.Net浏览器 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案, WinFrom嘛,效率虽然还不错,但是做一些特殊 ...

  2. Java猜拳小游戏（剪刀、石头、布）

    1.第一种实现方法,调用Random数据包,直接根据“1.2.3”输出“剪刀.石头.布”.主要用了9条输出判断语句. import java.util.Random; import java.util ...

  3. IB交换机配置命令总结

    串口通过远程CRT登录,波特率9600用户名和密码都是adminDo you want to use the wizard for initial configuration?选择no打开ip rou ...

  4. ＃ing＃ CSS细节注意点

    目录: 常用简写 权重(优先级) Hack 常用简写 权重(优先级) Hack    etc

  5. 初学python第二天

    今天我将用python来编写一款小游戏,用这个来总结一下自己学过的一些基础语法.没错,它就是井字游戏.想想自己第一接触这种游戏,还是小学生呢

  6. 《《我是一只IT小小鸟》》读后感

    接触IT也已经半年了,在这半年我没有充足的时间去了解IT这个行业,在大学生职业规划课程上,老师推荐了<<我是一只IT小小鸟>>这本书,我才发现IT这个行业并不是想象的那么无趣, ...

  7. 关于Unity -Vuforia -Android 开发 ，平台的搭建（极品菜鸟完整版）

    一.首先安装 java jdk , 度娘 “JDK” 进入官网下载即可,链接如下: http://www.oracle.com/technetwork/java/javase/downloads/jd ...

  8. php图片处理类库 Image

    image 下载地址 https://github.com/Intervention/image.git 下载之后解压 执行composer update 生成 autoload.php文件   该类 ...

  9. java-android推送

    之前做的推送,考虑了很多,最后因为各个因素,选择了极光的.

  10. Linux内核--网络栈实现分析（六）--应用层获取数据包（上）

    本文分析基于内核Linux 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7541907 更多请看专栏,地址http: ...