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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
js实现的折叠导航示例
Nov 29 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP 七大优势分析
2009/06/23 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
JS改变页面颜色源码分享
2018/02/24 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
Vue实现手机计算器
2020/08/17 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python访问hdfs的操作
2020/06/06 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
会计自荐书
2013/12/02 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
nginx日志格式分析和修改
2022/04/28 Servers