最近项目需要点击弹窗里面的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="data:images/jquery-1.11.1.min.js" type="text/javascript"></script>

        <script type="text/javascript" src="data: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="data:images/jquery-1.11.1.min.js" type="text/javascript"></script>

        <script type="text/javascript" src="data: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>

完美解决这个问题！

jQuery中对未来的元素绑定事件用 on的更多相关文章

  1. jQuery中对未来的元素绑定事件

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  2. jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代 ...

  3. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

  6. jquery给动态生成的元素绑定事件，on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  7. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  8. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  9. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

随机推荐

  1. VC++中字符串编码处理的一些相关问题

    前言 什么是tchar? 百度百科对其的定义如下": 因为C++支持两种字符串,即常规的ANSI编码(使用""包裹)和Unicode编码(使用L""包 ...

  2. 磁盘上没有足够的空间完成此操作的解决办法_Windows小知识

    前言: 我们有时候调整系统分区时会遇到"磁盘上没有足够的空间完成此操作"的情况导致我们的分区无法完成,然而我们的磁盘上明明有未分配的空间,为什么不能创建磁盘分区呢?本文将介绍通过把 ...

  3. JAVA中Integer.valueOf， parsetInt() String.valueOf的区别和结果

    先来看段代码 public class IntegerDemo { public static void main(String[] args) { String num = null; System ...

  4. Connection reset by peer的常见原因

    1,如果一端的Socket被关闭(或主动关闭,或因为异常退出而 引起的关闭),另一端仍发送数据,发送的第一个数据包引发该异常(Connect reset by peer). Socket默认连接60秒 ...

  5. 一个简单的例子实现自己的AOP

    AOP是Aspect Oriented Programming的缩写,意思是面向切面编程,与OOP(Object Oriented Programming)面向对象编程对等,都是一种编程思想. 从OO ...

  6. 如果裸写一个goroutine pool

    引言 在上文中,我说到golang的原生http server处理client的connection的时候,每个connection起一个goroutine,这是一个相当粗暴的方法.为了感受更深一点, ...

  7. 【线段树】Bzoj1230 [Usaco2008 Nov]lites 开关灯

    Description Farmer John尝试通过和奶牛们玩益智玩具来保持他的奶牛们思维敏捷. 其中一个大型玩具是牛栏中的灯. N (2 <= N <= 100,000) 头奶牛中的每 ...

  8. K短路 (A*算法) [Usaco2008 Mar]牛跑步&[Sdoi2010]魔法猪学院

    A*属于搜索的一种,启发式搜索,即:每次搜索时加一个估价函数 这个算法可以用来解决K短路问题,常用的估价函数是:已经走过的距离+期望上最短的距离 通常和Dijkstra一起解决K短路 BZOJ1598 ...

  9. Sql语言简介——检索数据

    检索数据可以通过SELECT语句来实现. select子句:用于选择数据表.视图中的列. into子句:用于将原表中的结构和数据插入新表中. from子句:用于指定数据来源,包括表.视图和其他sele ...

  10. P2P综述

    原文参见:http://www.lotushy.com/?p=113 [TOC] 什么是P2P P2P全称是Peer-to-peer.P2P计算或P2P网络是一种分布式应用架构.它将任务或负载分发给P ...