一. sweetalert cdn使用

  sweetalert提供了很多的炫酷弹框,有很多的用法。关于本地导入使用sweetalert的方法,在之前的博客里提到过(点击前往),不过我们也可以使用cdn。

  然后复制,黏贴至Html文件head便签中即可:

  可以修改创建html文件的模板,这样以后不用每次新建都手动导入cdn了:

二. 给sweetalert弹框的按钮绑定事件

  今天遇到一个情况,ajax中触发一个sweetalert弹框,随后一个location.href跳转页面,本来以为会等我们点击弹框的ok按钮后才会跳转的,但是结果并不是这样。弹框会在一瞬间就消失,跟没有弹框是一样一样的。

  代码如下:

swal(data['msg'], '点击进行登录', 'success');
location.href = '/login/';

  后来试验了一下,目前知道有两种方法:

  第一种(投机取巧):

  先把跳转的location.href注释了,然后运行后在检查页面按住ctrl+shift+c,然后点击一个sweetalert的弹框任意位置(不要是OK按钮就行,不然直接没了),然后依次点开往下寻找到OK按钮即可。

  随后发现就该Button有confirm类,所以用类选择器confirm找到该标签,随后绑定事件,这样是可以实现我们的需求的。

swal(data['msg'], '点击进行登录', 'success');
$('button, .confirm').click(function () {
location.href = '/login/'
})

  第二种,通过文本内容找到标签:

  button:contains("OK")意思就是文本有‘OK’字符串的button按钮,该方法也可以实现我们的需求。

swal(data['msg'], '点击进行登录', 'success');
$('button:contains("OK")').click(function () {
location.href = '/login/'
})
// 这里的text表示具体的文本字符串,  :contains是jQuery1.1.4新增的选择器
jQuery( ":contains(text)" )

给bootstrap-sweetalert弹框的按钮绑定事件的更多相关文章

  1. Angular中sweetalert弹框的使用详解

    最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweeta ...

  2. JOptionPane如何自定义按钮绑定事件

    JOptionPane如何自定义按钮绑定事件 2018年01月29日 19:27:10 阅读数:475 摘自:https://blog.csdn.net/m0_37355951/article/det ...

  3. sweetalert 弹框简单使用

    sweetalert网站 简单使用教程 拷贝文件 放到项目中 使用 页面效果 修改代码应用到事件中 成功删除演示(后台数据也会删除) 作 者:郭楷丰 出 处:https://www.cnblogs.c ...

  4. SweetAlert 弹框之后点击OK执行方法

    swal( '审核通过!', '', 'success' ).then(function () { Return(); })

  5. 常用代码之三:jQuery为按钮绑定事件的代码

    如题,比如有一个按钮:<input type='button' class='btn-text' id ='addHtml' value='新增' /> 为它添加onclick事件的代码: ...

  6. jquery给按钮绑定事件

    JQuery: $(function(){ $("#btn1").bind("click",function(){ $("#div1").s ...

  7. wxpython程序基本功能源码整理,包括基本文字,输入框,字体设置,按钮绑定事件触发

    #coding=utf-8 import wx class MyApp(wx.App): def __init__(self): wx.App.__init__(self) def OnInit(se ...

  8. JavaScript实现自定义alert弹框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO

  9. selenium常用api之切换:table切换、alert弹框切换、iframe框架切换

    10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...

随机推荐

  1. 阿里投资Magic Leap 是美酒还是毒药?

    Leap 是美酒还是毒药?" title="阿里投资Magic Leap 是美酒还是毒药?"> 土豪阿里又摊上"大事"了!但这次不是让人头痛的假 ...

  2. 从2019-nCoV趋势预测问题,联想到关于网络安全态势预测问题的讨论

    0. 引言 在这篇文章中,笔者希望和大家讨论一个话题,即未来趋势是否可以被精确或概率性地预测. 对笔者所在的网络安全领域来说,由于网络攻击和网络入侵常常变现出随机性.非线性性的特征,因此纯粹的未来预测 ...

  3. C++走向远洋——61(项目一、排序函数模板)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  4. git指令-管理修改

    git指令-管理修改 git管理的不是文件,而是修改 eg:对readme.txt文件进行修改一行 在最后追加一句git has to tracked 然后添加,并且查看状态 cat +文件名称 表示 ...

  5. 20170809-从URL输入到页面展现

    从URL输入到页面展现 1.输入URL URL:统一资源定位符,是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示. URL包含以下几部分:协议.服务器名称(或IP地址).路径.参数和查询. ...

  6. 从零认识 DOM (一): 对象及继承关系

    先上图为敬! 说明: 图中包括了大部分 DOM 接口及对象, 其中: 青色背景为接口, 蓝色背景为类, 灰色背景表示为 ECMAScript 中的对象 忽略了一部分对象, 包括: HTML/SVG 的 ...

  7. PHPRAP v1.0.6 发布,修复因php7.1版本遗弃mcrypt扩展造成安装失败的BUG

    PHPRAP,是一个PHP轻量级开源API接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造PHP版的RAP. 更新记录 [修复]修复因php7.1版本遗弃mcrypt扩展造成安装 ...

  8. 沃土前端系列 - HTML常用标签

    html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是"超文本标记语言",它是制作网页的标准语言.由于网页中不仅包含普通文本,还包含超文 ...

  9. new Date在IOS下面的兼容问题

    此问题坑爹啊,着实坑爹,要不是本宝宝鬼机灵再次进行了测试,不然测试都测不出来的问题,问题源头,有两个时间: let start =  "2018-08-08 00:00:00" ; ...

  10. 对javaweb项目中web.xml重用配置的理解(个人学习小结)

    <!-- 所有的总结描述性与语言都在注释中 --><?xml version="1.0" encoding="UTF-8"?> < ...