一. 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. 用shell脚本新建文件并自动生成头说明信息

    目标: 新建文件后,直接给文件写入下图信息 代码实现: [root@localhost test]# vi AutoHead.sh #!/bin/bash #此程序的功能是新建shell文件并自动生成 ...

  2. 题解 P1951 【收费站_NOI导刊2009提高(2)】

    查看原题请戳这里 核心思路 题目让求最大费用的最小值,很显然这道题可以二分,于是我们可以二分花费的最大值. check函数 那么,我们该怎么写check函数呢? 我们可以删去费用大于mid的点以及与其 ...

  3. 添砖加瓦:MySQL分布式部署

    1.集群环境  管理节点(MGM):这类节点的作用是管理MySQLCluster内的其他节点,如提供配置数据,并停止节点,运行备份等.由于这类节点负责管理其他节点的配置,应该在启动其他节点之前启动这类 ...

  4. Linux 信号介绍

    是内容受限时的一种异步通信机制 首先是用来通信的 是异步的 本质上是 int 型的数字编号,早期Unix系统只定义了32种信号,Ret hat7.2支持64种信号,编号0-63(SIGRTMIN=31 ...

  5. Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  6. LeetCode--二叉树2--运用递归解决树的问题

    LeetCode--二叉树2--运用递归解决树的问题 在前面的章节中,我们已经介绍了如何利用递归求解树的遍历. 递归是解决树的相关问题最有效和最常用的方法之一. 我们知道,树可以以递归的方式定义为一个 ...

  7. PhalApi 2.7 开发快速上手

    PhalApi是一款国人制作的PHP纯后端框架.它的开发相当简单,同时也具备文档生成等特色功能.下面,我通过简单的几点,让你可以快速入门使用该框架的开发. 建议使用PHPStorm作为IDE,代码提示 ...

  8. SPA那点事

    前端猿一天不学习就没饭吃了,后端猿三天不学习仍旧有白米饭摆于桌前.IT行业的快速发展一直在推动着前端技术栈在不断地更新换代,前端的发展成了互联网时代的一个缩影.而单页面应用的发展给前端猿分了一杯羹. ...

  9. React解决长列表方案(react-virtualized)

    github地址 高效渲染大型列表的响应式组件 使用窗口特性,即在一个滚动的范围内,呈现你给定数据的一小部分,大量缩减了呈现组件所需的时间,以及创建DOM节点的数量. 缺点:滑动过快,可能会出现空白的 ...

  10. Swfit 属性与汇编分析inout本质

    今天将讲述Swift属性以及剖析inout的本质, 如有兴趣可点击关注,以后会定期更新更有料的博客!!! 一.属性 Swift中跟实例相关的属性可以分为2大类 存储属性(Stored property ...