从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. btn-default

    Bootstrap 还有一种属于按钮的 class 属性叫做btn-default . to

  2. 用js写的比较简单3D旋转效果

    HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. STAF no JSTAF in java.library.path 的终极解决办法

    最近两天在研究利用STAF 实现程序更新包的自动部署测试.运行Demo代码时遇到一个坑.我的安装路径是默认的.C:\STAF\samples\demo在命令行窗口用执行命令:java STAFDemo ...

  4. 如何运用boolean跳出循环

    用布尔类型跳出循环:1.首先申明一个布尔变量:boolean y =false:申明位置在:方法内,循环外:public void s(){//在此申明布尔变量:for(){}}if(!y){}2,进 ...

  5. 使用ajax预加载图片

    使用Ajax 上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法.该方法利用DOM,不仅仅预加载图片,还会预加载CSS.JavaScript等相关的东西.使用Ajax,比直接使 ...

  6. [XAF] How to use the Allow/Deny permissions policy in the existing project

    https://www.devexpress.com/Support/Center/Question/Details/T418166 Clear [C#] using DevExpress.Persi ...

  7. java基础3_流程控制语句

    一 条件判断 1. 条件运算符(三元表达式) ,其形式为: type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4; 2. 轻量级的文本编辑器:Ultr ...

  8. 查询Oracle锁表和解决方法

    Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程等操作,那么这些操作是怎么实现的呢?本文我们主要就介绍一下这部分内容.(1)锁表查询的代码有以下的形式:select count( ...

  9. 为Apache动态增加模块

    Apache已经安装完毕并投入运行,但是后来却发现部分模块没有加载,当然有两个方法: 1. 一是完全重新编译Apache, 再安装 2. 编译模块为SO文件,使用LoadModule指令加载扩展模块. ...

  10. 关于Chrome浏览器不能使用Java插件的问题

    最近测试的“上海电信宽带测速系统”中HTTP测试需要用到java插件,之前装过好多次插件,装好后还是提示java插件未安装,郁闷了N久,最近问题终于得到了解决,故做分享~ 关于Chrome浏览器不能使 ...