jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼

更新時間：2016年04月28日 13:58:49 投稿：mdxy-dxy

這篇文章主要介紹了jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼,需要的朋友可以參考下

頁面上經(jīng)常會有彈窗，有的彈窗是動態(tài)生成的，有的彈窗是在頁面底部隱藏的，對于動態(tài)生成的彈窗，如果要監(jiān)聽彈窗的事件，可以使用jQuery的事件綁定on()方法實(shí)現(xiàn)。

如圖，彈窗是js動態(tài)生成的，通過點(diǎn)擊某個鏈接彈出，彈窗中的“立即去使用”鏈接點(diǎn)擊后，實(shí)現(xiàn)的效果是關(guān)閉彈窗，并跳轉(zhuǎn)到錨點(diǎn)。

這個a標(biāo)簽是：

<a style="display:" title="立即去使用" target="_blank" gid="167"  class="co_vip tdu ">立即去使用</a>

我們要監(jiān)聽彈窗里面的click事件，但這個彈窗本身是動態(tài)生成的，因此我們要監(jiān)聽body，通過on()事件綁定，當(dāng)動態(tài)生成這個彈窗時，可以監(jiān)聽到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;
    }
  });
}

這里實(shí)際上是綁定了兩個a標(biāo)簽的事件綁定，都是當(dāng)這個鏈接是某個url，阻止默認(rèn)行為，并調(diào)用關(guān)閉彈窗方法，跳轉(zhuǎn)到該鏈接，也就是錨點(diǎn)。

您可能感興趣的文章:

相關(guān)文章

高效jQuery選擇器的5個技巧實(shí)例分析
這篇文章主要介紹了高效jQuery選擇器的5個技巧,結(jié)合實(shí)例形式總結(jié)分析了jquery選擇器使用過程中發(fā)的各種常用技巧,需要的朋友可以參考下
2019-11-11
jQuery實(shí)現(xiàn)文件編碼成base64并通過AJAX上傳的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)文件編碼成base64并通過AJAX上傳的方法,涉及jQuery前臺使用FileReader對象編碼base64文件進(jìn)行ajax上傳及后臺php處理相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
Jquery Select操作方法集合腳本之家特別版
很多朋友對jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。
2010-05-05
jQuery中判斷對象是否存在的方法匯總
本文給大家匯總了下在jQuery中判斷對象是否存在的方法以及用原生javascript實(shí)現(xiàn)的方法，有相同需求的小伙伴可以來參考下。
2016-02-02
jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下
2014-03-03
360提示[高危]使用存在漏洞的JQuery版本的解決方法
今天用360檢測網(wǎng)站，提示高危]使用存在漏洞的JQuery版本，說是這個文件有問題jquery.min.js,這里腳本之家小編就為大家分享一下解決方法
2017-10-10
淺談JQuery+ajax+jsonp 跨域訪問
下面小編就為大家?guī)硪黄獪\談JQuery+ajax+jsonp 跨域訪問。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery讓控件左右移動的三種實(shí)現(xiàn)方法
常用的方法就是把控件的CSS position屬性設(shè)置為relative或 absolute，大家也可以學(xué)習(xí)下本文提供的其他方法
2013-09-09
jquery EasyUI的formatter格式化函數(shù)代碼
以下實(shí)例格式化數(shù)據(jù)表格中的一列。如果金額小于20時使用自定義的格式器將文本變成紅色。
2011-01-01
JQuery 寫的個性導(dǎo)航菜單
瀏覽者是否對網(wǎng)站感興趣，前20秒的第一印象至關(guān)重要，所以我們的設(shè)計要符合大眾的期望。下面我們將設(shè)計一個個性的導(dǎo)航菜單。
2009-12-12