jQuery事件绑定on()与弹窗实现代码


Posted in Javascript onApril 28, 2016

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

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

jQuery事件绑定on()与弹窗实现代码

这个a标签是:

<a style="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.***.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.***.com/vip/2016/51dps/#gamelist') {
      e.preventDefault();
      msgExit();
      window.location.href = link;
    }
  });
}

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

Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
js数组去重的方法总结
Jan 18 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 #Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 #Javascript
Bootstrap Chart组件使用教程
Apr 28 #Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
location.hash保存页面状态的技巧
Apr 28 #Javascript
字符串反转_JavaScript
Apr 28 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP无限分类的类
2007/01/02 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
简析Python的闭包和装饰器
2016/02/26 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
公司拓展活动方案
2014/02/13 职场文书
捐款倡议书
2014/04/14 职场文书
支部书记四风对照材料
2014/08/28 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
人事局接收函
2015/01/31 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
超市食品安全承诺书
2015/04/29 职场文书
校长一岗双责责任书
2015/05/09 职场文书
新闻稿标题
2015/07/18 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS