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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
关于微信小程序登录的那些事
Jan 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
百度地图API使用方法详解
2015/08/25 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
考研导师推荐信范文
2015/03/27 职场文书
交心谈心活动总结
2015/05/11 职场文书
生日宴会祝酒词
2015/08/10 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Python词云的正确实现方法实例
2021/05/08 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
canvas实现贪食蛇的实践
2022/02/15 Javascript