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中的null和undefined区别介绍
Jan 01 Javascript
javascript学习小结之prototype
Dec 03 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
原生JS实现不断变化的标签
May 22 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
谈谈JS中的!!
Dec 07 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
vue动态绑定class的几种常用方式小结
May 21 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
常用PHP框架功能对照表
2014/10/23 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php使用PDO方法详解
2014/12/27 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
PHP strripos函数用法总结
2019/02/11 PHP
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
python多进程共享变量
2016/04/06 Python
python实现简单购物商城
2016/05/21 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python多进程写入同一文件的方法
2019/01/14 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
自学python用什么系统好
2020/06/23 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
畜牧兽医本科生的自我评价
2014/03/03 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
证婚人致辞精选
2015/07/28 职场文书
2016年十一促销广告语
2016/01/28 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python