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

最近項目須要點擊彈窗裏面的a標籤出現外鏈接跳轉提示javascript

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

開始代碼：html

<!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事件也沒有觸發，檢查代碼也無問題，思來想去發現居然是將來元素在做怪。java

改後代碼：jquery

<!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>

完美解決這個問題！網站