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 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
Node.js实现断点续传
Jun 23 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伪静态页面函数附使用方法
2008/06/20 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python with用法实例
2015/04/14 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
数字漫画:comiXology
2020/06/13 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
汽车队司机先进事迹材料
2014/02/01 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL