頁面上經常會有彈窗，有的彈窗是動態生成的，有的彈窗是在頁面底部隱藏的，對于動態生成的彈窗，如果要監聽彈窗的事件，可以使用jQuery的事件綁定on()方法實現。
如圖，彈窗是js動態生成的，通過點擊某個鏈接彈出，彈窗中的“立即去使用”鏈接點擊后，實現的效果是關閉彈窗，并跳轉到錨點。
這個a標簽是：
<astyle="display:" title="立即去使用" target="_blank" gid="167" 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);});});代碼簡單，就不放演示頁了，如果有什么不明白的，歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
