jQuery绑定事件on()与弹窗的简要概述


Posted in Javascript onApril 27, 2016

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现。

如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的“立即去使用”链接点击后,实现的效果是关闭弹窗,并跳转到锚点。

jQuery绑定事件on()与弹窗的简要概述

这个a标签是:

<astyle="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.xunlei.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.xunlei.com/vip/2016/51dps/#gamelist') {
e.preventDefault();
msgExit();
window.location.href = link;
}
});
}

这里实际上是绑定了两个a标签的事件绑定,都是当这个链接是某个url,阻止默认行为,并调用关闭弹窗方法,跳转到该链接,也就是锚点。

下面给大家介绍jQuery on()方法绑定动态元素的点击事件

之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态生成的标签点击了没反应,而live方法却能够支持,于是乎到处查资料,问网友,结果找了好久在一篇文章中终于找到了答案。。。

jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。

比如页面上有下边两个元素:

<input type="button" name="addbtn" value="按钮添加" />
<div id="test"></div>

使用下边的jQuery代码大家可以对比看看区别:

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
a++;
});
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () { 
alert('我是有效的on方法,你能看见我吗:' + this.value);
});
//奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () { 
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件 发现点击无效,而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗:' + this.value);
});
});

代码简单,就不放演示页了,如果有什么不明白的,欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
js选择器全面解析
Jun 27 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 #Javascript
js实现纯前端的图片预览
Apr 27 #Javascript
简介BootStrap model弹出框的使用
Apr 27 #Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
javascript实现延时显示提示框特效代码
Apr 27 #Javascript
JS延时器提示框的应用实例代码解析
Apr 27 #Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 #Javascript
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python操作串口的方法
2015/06/17 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
人事部专员岗位职责
2014/03/04 职场文书
销售主管竞聘书
2014/03/31 职场文书
《锄禾》教学反思
2014/04/08 职场文书
实习指导老师评语
2014/04/26 职场文书
心理学专业求职信
2014/06/16 职场文书
十佳青年事迹材料
2014/08/21 职场文书
网吧温馨提示
2015/07/17 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS