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 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
angular2使用简单介绍
Mar 01 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
详解vue-cli3开发Chrome插件实践
May 29 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 session安全问题分析
2011/06/24 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
vue 组件销毁并重置的实现
2020/01/13 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python中的类学习笔记
2014/09/23 Python
spyder常用快捷键(分享)
2017/07/19 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
中学教师管理制度
2014/01/14 职场文书
安全责任书范文
2014/03/12 职场文书
共产党员公开承诺书
2014/03/25 职场文书
2014年项目工作总结
2014/11/24 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
实习工作表现评语
2014/12/31 职场文书
加强党性修养心得体会
2016/01/21 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python