一. 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. Laravel 队列使用

    触发 任务的触发,主要的实现是在IlluminateFoundationBusDispatchesJobs这个trait中实现的,其只包含两个方法 protected function dispatc ...

  2. VMware 虚拟机重启后获取不到ip的问题

    问题: VMware 虚拟机重启后获取不到ip,如图: 解决: 打开windows服务管理器,将VMware相关服务启动. 验证: 重启网络服务后,成功获取ip.

  3. 网络爬虫url跳转代码

    from bs4 import BeautifulSoup from urllib.request import urlopen import re import random base_url = ...

  4. 使用mysql创建自己的物化视图

    物化视图,它是用于预先计算并保存表连接或聚集等耗时较多的操作的结果,这样,在执行查询时,就可以避免进行这些耗时的操作,从而快速的得到结果.物化视图有很多方面和索引很相似:使用物化视图的目的是为了提高查 ...

  5. 有了这个开源 Java 项目,开发出炫酷的小游戏好像不难?

    本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 的游戏. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一 ...

  6. Python安装3 —— Python3.8和2.7共存

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12400896.html 一:Python解释器为什么要2个版本? 众所周知,Py ...

  7. Java核心技术卷1 第10版 笔记

    3.3 数据类型 Java是一种强类型语言.必须为每一个变量声明一种类型.在java中,一共有8终基本类型. 3.3.1 整形 类型 存储需求 取值范围 int 4字节 -2 147 483 648 ...

  8. VUE实现Studio管理后台(七):树形结构,文件树,节点树共用一套代码NodeTree

    本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...

  9. html建立大众点评页面遇到的问题

    大众点评所用知识 HTML.CSS.bootstrap3 遇到的问题 因图片无法对齐 源码:抛弃div改用img后成功对齐 解决后成功对齐 源码: 导航栏文本无法右对齐. 我想到的方法是: div{ ...

  10. echarts优化数据视图dataView中的样式

    在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下: t ...