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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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制作新闻系统的思路
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP header函数分析详解
2011/08/06 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
css3中transition属性详解
2014/09/02 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
房屋出售协议书
2014/04/10 职场文书
大学毕业寄语大全
2014/04/10 职场文书
离职证明标准格式
2014/09/15 职场文书