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

《jquery绑定事件on()与弹窗的简要概述_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的,对于动态生成的弹窗，如果要监听弹窗的事件，可以使用jQuery的事件绑定on()方法实现。如图，弹窗是js动态生成的，通过点击某个链接弹出，弹窗中的“立即去使用”链接点击后，实现的效果是关闭弹窗，并跳转到锚点。奖品查询X会员会题值礼友放时问3?品名称3?品信息2016-04-2512:133元手游代甜codetest024V7即去偉用亲.妇異您中奖所得奖品为实物奖品■请隽必填写”实物奖品收货信息"•以方便我们尽快为您派奖谢谢！觴的倏券激这个a标签是:〈astyle二"display:〃title

2、二〃立即去使用"target二〃_blank"gid二"167〃href=，/http://act・vip.xunlei.com/vip/2016/51dps/#gamelist〃class二〃coviptdu">立即去使用〈/a>我们要监听弹窗里面的click事件，但这个弹窗木身是动态生成的，因此我们要监听body,通过on()事件绑定，当动态生成这个弹窗时，可以监听到click方法：functionjump_to_anchor(){$(z，body〃).on("click",^spantname^msgbox_infoJ]a,・act-pop-tablea",

3、function(e){link=$(this).attr(，href，);if(1ink二二'http://act.vip.xunlei.eom/vip/2016/51dps/#gdmelist'){c.proventDcfaultO;msgExit();window.1ocation.href=link;}})；}这里实际上是绑定了两个3标签的事件绑定，都是当这个链接是某个url,阻止默认行为，并调用关闭弹窗方法，跳转到该链接，也就是锚点。下面给大家介绍jQueryon()方法绑定动态元素的点击事件之前就-直受这个问题的怵I扰，在jQueryl.7版木之后添加

4、了on方法，之前就了解过，其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个來测试结果发现，居然动态生成的标签点击了没反应，而live方法却能够支持，丁是乎到处查资料，问网友，结果找了好久在一篇文章屮终于找到了答OOOjQuery使用on绑定动态生成的元素时，不能宜接用该对象操作，而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。比如页而上冇下边两个元素：〈inputtype二〃buttoname二〃addbtvalue二〃按钮添加1〃/>

5、id二〃test">〈/div>使用下边的JQuery代码大家可以对比看看区别：$(function(){vara=1,$_div二$('#test，);$('input[neinic二addbtn]').on('click',function(){$_div.append('〈inputtype="button"name="test'+a+'"value二〃按钮'+a+'〃/>');a++;})；〃偶数项点击事件$_div.on('click',，input[name'test]:even',function(){alert（J我是冇效的on方法，你能看见我吗：

6、’+this,value）;｝）；〃奇数项绑定的点击事件发现点击无效，而是用live方法却能够支持$（'input[nam「二test]:odd，）.on（'click，,function（）｛alert（'我是无效的on方法，你不能看见我'）；｝）；〃奇数项绑定的点击事件发现点击无效，而是用live方法却能够支持$（，input[name^=test]:odd，）・live（'click',function（）｛alertC我是live方法，你能看见我吗：’+this,value）;｝）；｝）；代码简单，就不放演示页了，如果有什么不明白的，欢迎给我留言，小编会及

7、时回复大家的！