对()和弹出窗口上的jQuery绑定事件的简要概述

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

如图，弹出窗口由js动态生成，点击链接弹出。点击弹出窗口中的“立即使用”链接后，效果是关闭弹出窗口并跳转到锚点。

a标签是：

Astyle='display:' title='立即使用它' target=' _ blank ' GID=' 167 ' href=' http://act.vip.xunlei.com/VIP/2016/51dps/#游戏列表' class=' co _ viptdu '立即使用它。a、我们要监控弹出窗口中的点击事件，但是弹出窗口本身是动态生成的，所以我们要监控主体，当弹出窗口是动态生成的时候，我们可以监控点击方法：

函数jump_to_anchor() {$('body ')。on('click '，' span[name='msgbox_info'] a，act-pop-table a '，函数(e) {link=$(this)。attr(' href ')；if(link==' http://act . VIP . Xun lei.com/VIP/2016/51 dps/# game list '){ e . preventdefault()；msgExit()；window . location . href=link；}});}这里其实是用两个a标签绑定的事件，也就是当链接是url时，阻止默认行为，并调用关闭弹出窗口的方法跳转到链接，也就是锚点。

让我们介绍一下绑定动态元素的jQuery on()方法的click事件。

我以前被这个问题困扰过。在jQuery1.7版本之后，我增加了on方法，这个方法之前是知道的，它的优越性比live()、bind()、delegate()等方法都要高。在此之前，我尝试用这个来测试项目中的结果，发现动态生成的标签在点击时没有响应，但是live方法可以支持。于是我到处找资料问网友，终于在一篇文章里找到了。

当jQuery使用on绑定动态生成的元素时，它不能直接对对象进行操作，而是选择其非动态生成的父节点，然后找到自己来达到效果。看看源代码就知道了。方法单击时生成的按钮基数项无效，live方法有效。

例如，页面下方有两个元素：

type=' button ' name=' addbtn ' value=' button add '/div id=' test '/div您可以使用下面的jQuery代码来比较和查看差异：

$(function () {var a=1，$ _ div=$(' # test ')；$ ('input [name=addbtn]')。on ('click '，function () {$ _ div。追加(' input type=' button ' name=' test ' a ' ' value=' button ' a ' '/')；a；});//偶数个click事件$ _ div.on ('click '，' input [name=test] :even '，function () {alert('我是一个有效的on方法，你能看到我：' this . value ')；});//奇数项绑定的click事件发现click无效，但live方法可以支持$ ('input [name=test] : odd ')。on ('click '，function () {alert('我是无效的on方法，你看不到我')；});//奇数项绑定的click事件发现click无效，但live方法可以支持$ ('input [name=test] : odd ')。live ('click '，function () {alert('我是live method，你能看到我：' this . value ')；});});代码很简单，所以不要放演示页面。如果你什么都不懂，请给我留言，边肖会及时回复你的！