最近项目需要点击弹窗里面的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. 洛谷 P1450 解题报告

    P1450.硬币购物 题目描述 硬币购物一共有\(4\)种硬币.面值分别为\(c1,c2,c3,c4\).某人去商店买东西,去了\(tot\)次.每次带\(d_i\)枚\(c_i\)硬币,买\(s_i ...

  2. 第五章 MySQL函数

    一.数学函数 (1) 绝对值函数:ABS(x) ABS(x) 用于返回 x 的绝对值 mysql> SELECT ABS(2), ABS(-2.3), ABS(-33); +--------+- ...

  3. Java并发之ReentrantLock

    一.ReentrantLock简介 ReentrantLock字面意义上理解为可重入锁.那么怎么理解可重入这个概念呢?或者说和我们经常用的synchronized又什么区别呢? ReentrantLo ...

  4. 在mac OX10.11.6上安装MySQL

    一.之前失败情况 官网下载dmg文件安装.源码安装,下过5.6  5.7  8.0 版本,都可以安装成功,但是在电脑设置界面无法启动,每次点启动输入密码后,均闪一下绿色然后变红色,既然不能界面启动,那 ...

  5. 异常--java.text.ParseException: Unparseable date

    String d = "2015-05-19" SimpleDateFormat sdf =   new SimpleDateFormat( "yyyy/MM/dd HH ...

  6. 近期写js库中遇到的一个判别的问题

    最近在写一个自己的js库,正写到数组包,在里面定义了一个排序,只对纯数字数据进行排序的方法,但是在测试的时候发现一个很诡异的问题,那就是传入一个对象的时候,它没有返回erroemsg而是返回了对象,上 ...

  7. http2.0与http1.X的区别

    此文只是方便重看,原文在:http://www.mamicode.com/info-detail-1199706.html 1.1 HTTP应用场景 http诞生之初主要是应用于web端内容获取,那时 ...

  8. TestNG失败用例自动截图

    参考:https://blog.csdn.net/wangxin1982314/article/details/50247245 1. 首先写一个截屏方法 public class ScreenSho ...

  9. django(权限、认证)系统——自定义UserProfile储存User额外信息

    上篇文章我们引出了Django内置的权限控制系统,讲了安装,和最核心和基本的User模型的API和其Manager的API. 接下来我们继续深入下去,使用User对象做一些事情,首先当然就是创建一个U ...

  10. mac上如何解压和压缩rar文件

    许多喜欢mac的人都知道,这个os没有像win上winRAR或者hao123解压等类似软件,对于文件的压缩和解压很不方便,在下载rar的文件包之后就会束手无策,很是尴尬至极,为了避免这种情况,自己动手 ...