jQuery on()方法绑定动态元素的点击事件实例代码浅析

之前就一直受这个问题的困扰，在jQuery1.7版本之后添加了on方法，之前就了解过，其优越性高于live(),bind(),delegate()等方法，在此之前项目中想用这个来测试结果发现，居然动态生成的标签点击了没反应，而live方法却能够支持，于是乎到处查资料，问网友，结果找了好久在一篇文章中终于找到了答案。。。

jQuery 使用on绑定动态生成的元素时，不能直接用该对象操作，而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。

比如页面上有下边两个元素：

<input type="button" name="addbtn" value="按钮添加" />
<div id="test">
</div>

使用下边的jQuery代码大家可以对比看看区别：

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
a++;
});
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () {
alert('我是有效的on方法,你能看见我吗：' + this.value);
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () {
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗：' + this.value);
});
});

以上所述是小编给大家介绍的jQuery on()方法绑定动态元素的点击事件的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jquery无法为动态生成的元素添加点击事件的解决方法(推荐)

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

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

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • jQuery自定义元素右键点击事件(实现案例)

    大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其

  • jquery实现在网页指定区域显示自定义右键菜单效果

    jquery实现在网页指定区域显示自定义右键菜单效果

    本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar

  • jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案... jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果.大家看看源码就知道了.生成的按钮基数项on方法点击无效l

  • jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

  • jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等. 之前使用 on 的时候一直是 $("").on('click','function(){ }') 之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现正确用法应该是 $(document).on("change","#pageSize_out",function(){ if($("

  • 浅析jquery unbind()方法移除元素绑定的事件

    unbind()方法可以移除元素已绑定的事件,它的调用格式如下: $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称. 语法  unbind()函数主要有以下两种形式的用法: 用法一: jQueryObject.unbind( [ events [, handler ]] ) 移除当前匹配元素的events事件绑定的事件处理函数handler. 用法二: jQueryObject.unb

  • Jquery on方法绑定事件后执行多次的实现方法

    Jquery on方法绑定事件后执行多次的实现方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jquery动态创建div与input的实例代码

    无意中发现的,做为收藏,以备后绪查看时用. 实例如下: <html> <head> <title>jjquery动态创建div与input</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script> <!--动态创建div--> $(function (){ $(&

随机推荐