JavaScript怎样在删除前添加确认弹出框?


Posted in Javascript onMay 27, 2019

一,【前言】

最近架构组开发的”异常监控平台”,虽说是公司内部基础研发部业务组上百人用的一个系统,但是对一下体验度的提升还是要的,例如,删除是直接删除还是删除之前有一个确认弹出框比较好呢?

答案当然是有确认提示框好,这样可以避免误删.

JavaScript怎样在删除前添加确认弹出框?

二,【详情】 

1,思考方法:

可以添加 js, 或添加一个 function 用一个Ajax.

2,现在情况:

原代码删除是 HTML表单形式,调接口的方式;  网上查了一般都是 onclick方式,这怎么办?

JavaScript怎样在删除前添加确认弹出框?

3,本次解决方案:

(1)  更改 href=”” 换成 onclick=”function()” 触发.

JavaScript怎样在删除前添加确认弹出框?

(2)  onclick=”function()”中 function() 实现:

 JavaScript怎样在删除前添加确认弹出框?

(3)  优化后代码如下:

onclick 代码:

var delHtml = '<a name="trash"style="cursor: pointer" class="glyphicon glyphicon-trash"title="删除" onclick="confirmDel('+id+')"></a>';

function 函数如下 :

functionconfirmDel( id) {
var r=confirm("您确定要删除?")
if (r==true)
{
$.post("/alcf/del",{id:id},function (result) {
window.location.reload();
})
}else {return;}
}

三,【小结】     

圣人有曰:”不怕不知道,就怕不知道!”,先查询,先去实践,在去更改和优化,第一次不一定能做到至善至美,但是一定要去先实践, 多交流,多沟通, 先站在巨人的肩膀上去成长!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
js实现列表按字母排序
Aug 11 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
You might like
PHP中SimpleXML函数用法分析
2014/11/26 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
英文简历自荐信范文
2013/12/11 职场文书
职业规划书如何设计?
2014/01/09 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电