jQuery绑定事件on()与弹窗的简要概述


Posted in Javascript onApril 27, 2016

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现。

如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的“立即去使用”链接点击后,实现的效果是关闭弹窗,并跳转到锚点。

jQuery绑定事件on()与弹窗的简要概述

这个a标签是:

<astyle="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.xunlei.com/vip/2016/51dps/#gamelist" class="co_vip tdu ">立即去使用</a>

我们要监听弹窗里面的click事件,但这个弹窗本身是动态生成的,因此我们要监听body,通过on()事件绑定,当动态生成这个弹窗时,可以监听到click方法:

function jump_to_anchor() {
$("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {
link = $(this).attr('href');
if (link == 'http://act.vip.xunlei.com/vip/2016/51dps/#gamelist') {
e.preventDefault();
msgExit();
window.location.href = link;
}
});
}

这里实际上是绑定了两个a标签的事件绑定,都是当这个链接是某个url,阻止默认行为,并调用关闭弹窗方法,跳转到该链接,也就是锚点。

下面给大家介绍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);
});
});

代码简单,就不放演示页了,如果有什么不明白的,欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 #Javascript
js实现纯前端的图片预览
Apr 27 #Javascript
简介BootStrap model弹出框的使用
Apr 27 #Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
javascript实现延时显示提示框特效代码
Apr 27 #Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
You might like
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
会议邀请函
2015/01/30 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
永不妥协观后感
2015/06/10 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
python入门之算法学习
2021/04/22 Python
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers