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操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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/10/08 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python用户管理系统
2018/03/13 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python 字典访问的三种方法小结
2019/12/05 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
班长岗位职责
2013/11/10 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
人大调研汇报材料
2014/08/14 职场文书
Go获取两个时区的时间差
2022/04/20 Golang