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滚动条回到顶部的代码
Dec 06 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python实现复制整个目录的方法
2015/05/12 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python 实现图片裁剪小工具
2021/02/02 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
实习生个人的自我评价
2013/12/08 职场文书
学校七一活动方案
2014/01/19 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
法人代表任命书范本
2014/06/05 职场文书
个人安全生产责任书
2014/07/28 职场文书
村道德模范事迹材料
2014/08/28 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
导游词之晋城蟒河
2019/12/12 职场文书