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 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
JavaScript实现刮刮乐效果
Nov 01 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php构造函数实例讲解
2013/11/13 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Django视图和URL配置详解
2018/01/31 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
经典c++面试题二
2015/08/14 面试题
后勤主管岗位职责
2014/03/01 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL