最近项目需要点击弹窗里面的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. Scrapy爬虫框架第三讲（linux环境）

    下面我们来学习下Spider的具体使用: 我们已上节的百度阅读爬虫为例来进行分析: 1 # -*- coding: utf-8 -*- 2 import scrapy 3 from scrapy.li ...

  2. esayui扩展验证方法

    下面是关于平时中积累的esayui扩展验证方法仅作记录:       /**************************************************************** ...

  3. 深入理解.net - 4.你必须知道的String

    为什么要单独写string,主要是它太常用了,同时又太特殊了,特殊到CLR对它的处理都和其它对象不一样.简直可以称为VIP用户啊.本文并不是一篇介绍如何使用string的文章,而是旨在阐述string ...

  4. 转)ZooKeeper的实现分析

    最近在大量看关于Zookeeper的博客,发现一篇讲解ZK实现很详细的博客,特此转载一下: 原博客地址: http://my.oschina.net/zhengyang841117/blog/1866 ...

  5. Atlas的优缺点及测试结论

    优点 1,实现了读写分离(并通过hint/*master*/可强制走主库,并且加入了权重配置可进行读的负载均衡 2,自身维护了一套连接池,减少了创建连接带来的性能消耗 3,支持DB动态上下线,方便横向 ...

  6. IO流系列一：输入输出流的转换

    输入流转字节数组的原理1.读取输入流,每一小段 读一次,取出 byteArray .2.将该一小段byteArray写入到字节输出流ByteOutStream.直到不能从输入流再读出字节为止.3.将字 ...

  7. .net 工程中引用出现感叹号

    在工程中引用出现感叹号,有两个原因 原因1:  这是由于之前引用的Dll文件不见了. 解决方案: 右键有感叹号的项,然后选择 “属性” 里边有一个路径属性 这个路径就是之前这个Dll文件的路径,现在这 ...

  8. Oracle-12：伪列rowid和rownum

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 伪列:不真实存储在真表中,但是我们可以查询到不能对伪列进行增删改操作! 分页可以用rownum来分!!!!!! ...

  9. SSM-Spring-21：Spring中事物的使用案例

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 股票买卖案例(我会用三种开启事物的方法 代理工厂bean版的,注解版的,aspectj xml版的) 简单的介 ...

  10. CAP原理和BASE思想

    分布式领域CAP理论,Consistency(一致性), 数据一致更新,所有数据变动都是同步的Availability(可用性), 好的响应性能Partition tolerance(分区容错性) 可 ...