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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
js获取form的方法
May 06 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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执行sql语句的写法
2009/03/10 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
大学生个人事迹材料
2014/01/21 职场文书
简历的自我评价范文
2014/02/04 职场文书
狼和鹿教学反思
2014/02/05 职场文书
地球一小时宣传标语
2014/06/24 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
销售员自我评价
2015/03/11 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
python实现简单的名片管理系统
2021/04/26 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
React如何创建组件
2021/06/27 Javascript