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基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
使用python实现链表操作
2018/01/26 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
dpn网络的pytorch实现方式
2020/01/14 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
新闻发布会主持词
2014/03/28 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
对讲机知识
2022/04/07 无线电