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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
javaScript封装的各种写法
Aug 14 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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安全配置
2006/10/09 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php源码的使用方法讲解
2019/09/26 PHP
js资料prototype 属性
2007/03/13 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
js实现简单的倒计时
2021/01/28 Javascript
Python验证码识别处理实例
2015/12/28 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python3.x上post发送json数据
2018/03/04 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
创业计划书怎样才能打动风投
2014/01/01 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android