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 小贴士一星期合集
Apr 07 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
德生S2000电路分析
2021/03/02 无线电
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
小程序实现发表评论功能
2018/07/06 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
企业给企业的表扬信
2014/01/13 职场文书
纠风工作实施方案
2014/03/15 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书