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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
vue中动态添加class类名的方法
Sep 05 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
短波问题解答
2021/02/28 无线电
php实现以只读方式打开文件的方法
2015/03/16 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php中序列化与反序列化详解
2017/02/13 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
总结4个方面优化Vue项目
2019/02/11 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python实现获取命令行输出结果的方法
2017/06/10 Python
详解python:time模块用法
2019/03/25 Python
python处理excel绘制雷达图
2019/10/18 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
违反学校规定检讨书
2014/01/18 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
博士导师推荐信
2015/03/25 职场文书