给bootstrap-sweetalert弹框的按钮绑定事件
一. 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弹框的按钮绑定事件的更多相关文章
- Angular中sweetalert弹框的使用详解
最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweeta ...
- JOptionPane如何自定义按钮绑定事件
JOptionPane如何自定义按钮绑定事件 2018年01月29日 19:27:10 阅读数:475 摘自:https://blog.csdn.net/m0_37355951/article/det ...
- sweetalert 弹框简单使用
sweetalert网站 简单使用教程 拷贝文件 放到项目中 使用 页面效果 修改代码应用到事件中 成功删除演示(后台数据也会删除) 作 者:郭楷丰 出 处:https://www.cnblogs.c ...
- SweetAlert 弹框之后点击OK执行方法
swal( '审核通过!', '', 'success' ).then(function () { Return(); })
- 常用代码之三:jQuery为按钮绑定事件的代码
如题,比如有一个按钮:<input type='button' class='btn-text' id ='addHtml' value='新增' /> 为它添加onclick事件的代码: ...
- jquery给按钮绑定事件
JQuery: $(function(){ $("#btn1").bind("click",function(){ $("#div1").s ...
- wxpython程序基本功能源码整理,包括基本文字,输入框,字体设置,按钮绑定事件触发
#coding=utf-8 import wx class MyApp(wx.App): def __init__(self): wx.App.__init__(self) def OnInit(se ...
- JavaScript实现自定义alert弹框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCO
- selenium常用api之切换:table切换、alert弹框切换、iframe框架切换
10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...
随机推荐
- java虚拟机的运行原理
一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 javac YourClassNam ...
- 利用Nginx或koa
最近在做上传的图片的需求,思考上传之后的图片怎么访问的问题,因为后端是Node,一开始尝试写一个专门的接口通过传入图片的path来查找,试了一下感觉并不理想,因为要为每种类型的文件设置Content- ...
- 【原创】(三)Linux进程调度器-进程切换
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- scrapy post payload的坑及相关知识的补充【POST传参方式的说明及scrapy和requests实现】
一.问题及解决: 在用scrapy发送post请求时,把发送方式弄错了. 本来应该是 application/x-www-form-urlencoded 弄成了application/json. 但 ...
- 有了这个开源 Java 项目,开发出炫酷的小游戏好像不难?
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 的游戏. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一 ...
- iOS 使用系统的UITabBarController 修改展示的图片大小
1. 设置TabBarItem图片的大小 1 - (void)configurationAppTabBarAndNavigationBar { // 选中的item普通状态图片的大小 UIImage ...
- py函数式编程
函数式编程把计算视为函数而非指令,纯函数式编程不需要变量,没有副作用,测试简单,python支持的函数式编程不是纯函数式编程,允许有变量存在,支持高阶函数,支持闭包,有限度的支持匿名函数 变量可以指向 ...
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
- elasticsearch 创建索引
一.基本概念 索引:含有相同属性的文档的集合. //可以想象成一个数据库 database 类型:索引可以定义一个或多个类型,文档必须属于一个类型. //可以想象成数据库中的表 table 文档:文档 ...
- PHP攻击网站防御代码-以及攻击代码反译
<?php //查询禁止IP $ip =$_SERVER['REMOTE_ADDR']; $fileht=".htaccess2"; if(!file_exists($fil ...