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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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 安全过滤函数代码
2011/05/07 PHP
解析PHP提交后跳转
2013/06/23 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python绘制多个子图的实例
2019/07/07 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
大学生的创业计划书就该这么写
2014/01/30 职场文书
开学典礼演讲稿
2014/05/23 职场文书
考察邀请函范文
2015/01/31 职场文书
新学期开学寄语2016
2015/12/04 职场文书