最近项目需要点击弹窗里面的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. Java开源生鲜电商平台-支付模块的设计与架构(源码可下载）

    Java开源生鲜电商平台-支付模块的设计与架构(源码可下载) 开源生鲜电商平台支付目前支持支付宝与微信.针对的是APP端(android or IOS)   1. 数据库表设计. 说明:无论是支付宝还 ...

  2. R画网络图

    R  画网络图 目的:用R做生信分析,画基因样本的网络图,从中观察样本的致病性情况. 一.所用到的包 library(tidyr) library(ggplot2) library(reshape2) ...

  3. @ConditionalOnMissingBean注解理解

    @ConditionalOnMissingBean注解作用在@bean定义上,它的作用就是在容器加载它作用的bean时,检查容器中是否存在目标类型(ConditionalOnMissingBean注解 ...

  4. SSM-SpringMVC-19：SpringMVC中请求和响应的乱码解决

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 配置一道拦截器即可解决乱码 配置方式如下: 在web.xml中: <!--过滤器处理乱码--> ...

  5. 集成学习之Boosting —— AdaBoost原理

    集成学习大致可分为两大类:Bagging和Boosting.Bagging一般使用强学习器,其个体学习器之间不存在强依赖关系,容易并行.Boosting则使用弱分类器,其个体学习器之间存在强依赖关系, ...

  6. bug排查小结

    mysql cpu利用率偏高,并且长时间居高不下. show processlist 发现有一个单表查询的sql语句出现的频率比较高, 这个单表查询中规中矩,where语句中条件都使用”=“连接,再加 ...

  7. 常见的web测试功能点测试思路

    常见的功能点的测试思路: . 新增 或 创建(Add or Create) ) 操作后的页面指向 )操作后所有绑定此数据源的控件数据更新,常见的排列顺序为栈Stack类型,后进先出 ) 取消操作是否成 ...

  8. jQuery学习之旅 Item9 动画效果

    1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...

  9. 一次完整的HTTP网络请求过程详解

    0.  前言 从我们在浏览器的地址栏输入http://blog.csdn.net/seu_calvin后回车,到我们看到该博客的主页,这中间经历了什么呢?简单地回答这个问题,大概是经历了域名解析.TC ...

  10. 集合-Table

    当我们需要多个索引的数据结构的时候,通常情况下,我们只能用这种丑陋的Map<FirstName, Map<LastName, Person>>来实现.为此Guava提供了一个新 ...