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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
js实现无缝轮播图
Mar 09 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
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
python实现人脸识别代码
2017/11/08 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
英语教师岗位职责
2014/03/16 职场文书
医院院务公开实施方案
2014/05/03 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
法定代表人证明书
2014/11/28 职场文书
长城的导游词
2015/01/30 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
导游词之安徽九华山
2019/09/18 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
python区块链实现简版工作量证明
2022/05/25 Python