jQuery中對未來的元素綁定事件用 on

本文轉載自查看原文 2019-03-15 10:05 2406 JAVASCRIPT/ jQuery/ JavaScript/ 前端

最近項目需要點擊彈窗里面的a標簽出現外連接跳轉提示

<a href="javascript:void(0);"  target="_blank" id="swba" >彈窗提示</a>

開始代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
        <title></title>
        <script src="images/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="images/layer.min.js"></script>
        
    </head>
    <body>
        <a href="javascript:void(0);"  target="_blank" id="swba" ><em class="one-line special-t special-te">彈窗按鈕</em></a>
        
        <script>
               $(function(){
                
                    $("#swba").click(function(){
                            layer.open({
                                type: 1,
                                title : '公告',
                                closeBtn: 1,
                                area: ['346px', 'auto'],
                                shadeClose: false,
                                content: '<div style="padding:10px; line-height:200%;"><div style="text-align:left;">請前往<a href="http://www.baidu.com/"  style="color:#174ed0;" onclick="return confirm('您訪問的鏈接即將離開“***”網站，是否繼續？');">http://www.baidu.com</a>搜索查詢</div></div>'
                        });
                    })
               });
        </script>
    </body>
</html>

發現點擊a標簽后無提示窗選擇直接跳轉走了，打log事件也沒有觸發，檢查代碼也無問題，思來想去發現竟然是未來元素在作怪。

改后代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
        <title></title>
        <script src="images/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="images/layer.min.js"></script>
        
    </head>
    <body>
        <a href="javascript:void(0);"  target="_blank" id="swba" ><em class="one-line special-t special-te">彈窗按鈕</em></a>
        
        <script>
               $(function(){
                
                    $("#swba").click(function(){
                            layer.open({
                                type: 1,
                                title : '公告',
                                closeBtn: 1,
                                area: ['346px', 'auto'],
                                shadeClose: false,
                                content: '<div style="padding:10px; line-height:200%;"><div style="text-align:left;">請前往<a href="http://www.baidu.com/"  style="color:#174ed0;" class="urlTip">http://www.baidu.com</a>搜索查詢</div></div>'
                        });
                    })
                    
                    
                    $(document).on("click",".urlTip",function(){ return confirm('您訪問的鏈接即將離開***網站，是否繼續？'); })
               });
        </script>
    </body>
</html>

完美解決這個問題！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery動態給子元素綁定事件，將元素內容添加到另一個元素中 jquery給動態添加的元素綁定事件 jQuery判斷元素是否綁定了click事件 jQuery綁定動態元素的點擊事件無效 jquery on 綁定多個事件多個元素 jquery:為動態加載的元素綁定事件 jQuery給動態添加的元素綁定事件的方法 jQuery 綁定事件到動態創建的元素上 JQuery中動態生成元素的綁定事件（坑死寶寶了） jQuery中的事件綁定的幾種方式