当前位置： 首页 > news >正文

弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?

news 2026/4/17 19:06:37

一、场景

  • 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
  • 问题：后端返回了展示的HTML里有一个按钮，希望点击这个按钮时可以关闭弹窗。如下图的交叉按钮：活动弹窗的示意图

二、解决方案

  • 考虑到需求的历史背景，以及后续的可维护性。决定在后端返回的HTML里，给期望关闭弹窗的按钮添加上ID。
  • 而在前端项目里，弹窗加载完成并且接口已经返回数据后，我们可以通过ID获取到用于关闭弹窗的按钮元素，然后给这个按钮添加一个点击事件监听器。当用户点击该元素时，会触发关闭弹窗的函数。

三、代码演示

Step1. 前端项目里存放着弹窗，弹窗里的内容通过读取接口返回的 html 赋值给content，然后通过v-html 呈现。将关闭弹窗的函数写在此处，下面仅展示一些核心的实现代码（Vue3+Vuetify）：

<template><v-dialogv-model="visible"><v-card ><div v-html="content"></div></v-card></v-dialog>
</template>

handleClose() {this.visible = false
}

Step2. 此时，接口返回一段JSON，用于页面呈现。里面可能包含了一个按钮用于关闭这个弹窗，我们需要给这个按钮添加上ID（下图里的id=\"close-btn\"），与后续的步骤关联。

{"content": "<div>\n <a type=\"button\">\n <span class=\"v-btn__content\" id=\"close-btn\">关闭</span>\n    </a>\n  </div>","startTime": "2023-12-01 00:00:00","endTime": "2024-2-29 00:00:00"
}

Step3. 在前端项目里，弹窗加载完成并且接口已经返回数据后，我们可以通过ID获取到用于关闭弹窗的按钮元素，然后给这个按钮添加一个点击事件监听器。当用户点击该元素时，会触发关闭弹窗的函数。

document.getElementById('close-btn')?.addEventListener('click', this.handleClose)

四、可能存在的坑点

需要等接口的数据返回并且生成了相关的元素以后，才能对按钮添加事件监听。否则会监听不到这个元素。验证过程如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证节点未生成时添加事件监听是否有效</title><!-- 这个案例证明了给一个不存在的节点（通过指定ID的方式）添加事件监听是无效的，即使之后会往页面上生成同样id的元素 --><!-- 因此，一定要确保元素已经在页面上挂载了，才去添加事件监听 --></head><body><div id="parent"><buttonid="create">生成新按钮</button></div><script>/*** 创造一个新的元素**/function createNewNode() {const parentElem = document.getElementById('parent')const newElem = document.createElement('button')newElem.textContent = '新按钮'newElem.setAttribute('id', 'new')parentElem?.insertBefore(newElem, document.getElementById('create'))document.getElementById('new')?.addEventListener('click', function () {newNodeOnClick('按钮生成后')})}/*** 新元素被点击时触发* @param timing 点击的时机**/function newNodeOnClick(timing) {console.log('newNodeOnClick', timing)}document.addEventListener('DOMContentLoaded', function (e) {document.getElementById('create')?.addEventListener('click', createNewNode)document.getElementById('new')?.addEventListener('click', function () {newNodeOnClick('页面加载完毕后')})})</script></body>
</html>

相关文章：

弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?

一、场景 背景&#xff1a;因为系统里经常有新活动或者公告需要通知所有用户&#xff0c;希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候&#xff0c;前端项目都发版了。因此&#xff0c;前端维护了这个弹窗和它的关闭事件&#xff0c;至…...

编程日记 2024/3/1 4:27:58

[数据结构 C++] AVL树的模拟实现

文章目录 1、AVL树1.1 AVL树的概念 2、AVL树节点的定义3、AVL树的插入和旋转3.1 左单旋左旋代码实现 3.2 右单旋右旋代码实现 3.3 右左双旋右左双旋的代码实现 3.4 左右双旋左右双旋的代码实现 3.5 insert接口实现 4、判断是否为AVL树判断AVL树的代码实现 5、AVL树的性能 问题引…...

编程日记 2024/3/1 4:26:57

深入理解ngx_http_proxy_connect_module模块（下）

目录 5. 源码分析5.1 模块的初始化代码5.2 请求入口点函数分析5.2.1 ngx_http_proxy_connect_post_read_handler5.2.2 ngx_http_proxy_connect_handler5.3 域名解析回调5.4 向上游服务器发起连接5.4.1 ngx_http_proxy_connect_process_connect5.4.2 ngx_http_proxy_connect_wri…...

编程日记 2024/3/1 4:23:54

HTTP详解（HTTP的特点，状态码，工作原理，GET和POST的区别，如何解决无状态通信）！！！

文章目录 一、HTTP协议简介二、HTTP的主要特点三、HTTP之URL四、Request和Respons五、HTTP的状态码六、HTTP工作原理七、GET和POST请求的区别八、解决HTTP无状态通信——Cookie和Session 一、HTTP协议简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&…...

编程日记 2024/3/1 4:22:53

【QT+QGIS跨平台编译】之五十七：【QGIS_CORE跨平台编译】—【VECTOR_TILE生成】

文章目录 一、protoc二、生成来源三、构建过程一、protoc Protocol Buffers（简称 protobuf）是一种轻量级、高效的数据序列化框架，它可以将结构化数据序列化为二进制格式，同时还可以进行反序列化和数据压缩。相比于 XML 和 JSON 等传统的文本序列化格式，protobuf 采用二进制…...

编程日记 2024/3/1 4:21:51

2024年腾讯云优惠政策_腾讯云TOP10优惠活动

腾讯云服务器多少钱一年&#xff1f;62元一年起&#xff0c;2核2G3M配置&#xff0c;腾讯云2核4G5M轻量应用服务器218元一年、756元3年&#xff0c;4核16G12M服务器32元1个月、312元一年&#xff0c;8核32G22M服务器115元1个月、345元3个月&#xff0c;腾讯云服务器网txyfwq.co…...

编程日记 2024/3/1 4:20:51

SpringMVC 学习（二）之第一个 SpringMVC 案例

目录 1 通过 Maven 创建一个 JavaWeb 工程 2 配置 web.xml 文件 3 创建 SpringMVC 配置文件 spring-mvc.xml 4 创建控制器 HelloController 5 创建视图 index.jsp 和 success.jsp 6 运行过程 7 参考文档 1 通过 Maven 创建一个 JavaWeb 工程 可以参考以下博文&#x…...

编程日记 2024/3/1 4:18:49

qt5与qt6的cmake区别

文章目录 使用cmake构建qt项目&#xff0c;坑很多。一是本身就麻烦&#xff0c;二是&#xff0c;确实坑&#xff0c;因为不同的qtcreator版本&#xff0c;选了不同的kits&#xff08;套件&#xff09; 生成的CMakeList.txt文件也不一样。 如果可以的话都选择Qt6的相关选项&…...

编程日记 2024/3/1 4:14:46

【计算机网络】一些乱七八糟内容

MAC Media Access Control 用于在局域网&#xff08;LAN&#xff09;或广域网&#xff08;WAN&#xff09;中实现设备自动接入网络 "载波侦听多路访问"(Carrier Sense Multiple Access) CSMA/CD 是CSMA的升级版本&#xff0c;加入了序列号检测机制。 CSMA/CA 是CSM…...

编程日记 2024/3/1 4:10:41

基于ESP32的MicroPython项目量产烧写指南

背景 前段时间用MicroPython开发了一个项目&#xff0c;硬件是ESP32-C3&#xff0c;目前准备量产&#xff0c;我需要提供固件以供加工厂批量烧录&#xff0c;需要把我有程序的板子里的程序读出来&#xff0c;然后下到别的板子上&#xff0c;以下做这件事情的过程记录。 1.固件…...

编程日记 2024/3/1 4:09:40

线性规划的标准型转换

对于任意给定的线性规划的问题&#xff0c;其实其本身可能是不符合线性规划标准型的需求的&#xff0c;但是如果通过一系列的等价变化的话&#xff0c;是可以将该问题转换为标准型的线性规划问题&#xff0c;例如如下的线性规划问题: 添加图片注释&#xff0c;不超过 140 字&am…...

编程日记 2024/3/1 4:08:37

机器学习：探寻智能化时代的科技奇迹

在数字化浪潮席卷全球的今天&#xff0c;机器学习已然成为科技领域的一颗璀璨明星&#xff0c;引领着人工智能不断向前发展。那么&#xff0c;机器学习究竟是什么&#xff1f;它为何能在众多科技中脱颖而出&#xff0c;成为改变世界的力量&#xff1f;本文将带您一探究竟&#…...

编程日记 2024/3/1 4:07:36

《Flask入门教程》学习笔记

《Flask入门教程》官网&#xff1a;https://tutorial.helloflask.com/ 目录 第一章&#xff1a;准备工作第二章&#xff1a;Hello, Flask!第三章&#xff1a;模板第四章&#xff1a;静态文件第五章&#xff1a;数据库第六章&#xff1a;模板优化第七章&#xff1a;表单第八章&a…...

编程日记 2024/3/1 4:05:34

go语言基础 -- map的定义与使用

map的定义与使用 map声明基础语法map的基本使用map的遍历map切片map排序 map声明基础语法 // map的声明 var xxx_map map[key_type]value_typemap的key可以是基本数据类型&#xff0c;channel&#xff0c;接口&#xff0c;结构体&#xff0c;数组&#xff0c;但不能是slice&am…...

编程日记 2024/3/1 4:04:33

讯方·智汇云校第五期名师班火热报名中！

第三期名师班回顾 授课情况 课堂上&#xff0c;同学们热情高涨&#xff0c;积极参与互动。他们紧跟名师的步伐&#xff0c;深入探索云服务的奥秘。张梁老师在为同学们讲述完知识点后&#xff0c;会根据所讲知识给同学们布置对应的实验&#xff0c;由同学们分组讨论练习。 每…...

编程日记 2024/3/1 4:03:32

为什么企业需要使用云电子邮箱？

作为一家机构的负责人&#xff0c;您比大多数人都清楚&#xff0c;您的工作日不会在下午5点就结束。很可能&#xff0c;当您的员工已经打卡下班回家很久之后&#xff0c;您还在以这样或那样的方式继续工作。作为一名企业主&#xff0c;埋头苦干对您来说并不是什么新鲜事&#x…...

编程日记 2024/3/1 4:01:30

[DEBUG] spring boot-如何处理链接中的空格等特殊字符

问题&#xff1a; get或者post中提交的内容可能有空格、#等特殊字符&#xff0c;不做处理的话可能解析错误。 解决&#xff1a; html中&#xff1a; <a th:href"{/listSgrna(id${item.getGeneId()},geneName${item.getGeneName()},genome${genome},sgrnaNum${sgrnaN…...

编程日记 2024/3/1 4:00:30

通过配置数据库事件（Event）来实现定时导出 MySQL 数据库

首先&#xff0c;确保 MySQL 服务器已启用事件调度器功能。你可以通过以下 SQL 语句查询&#xff1a; SHOW VARIABLES LIKE event_scheduler; 如果 event_scheduler 的值为 ON&#xff0c;则表示事件调度器已启用&#xff1b;如果为 OFF&#xff0c;则可以使用以下语句启用&…...

编程日记 2024/3/1 3:59:28

基于x86架构的OpenHarmony应用生态挑战赛等你来战！

为了更快速推进OpenHarmony在PC领域的进一步落地&#xff0c;加快x86架构下基于OpenHarmony的应用生态的繁荣&#xff0c;为北向应用开发者提供一个更加便捷的开发环境&#xff0c;推动OpenHarmony北向应用开发者的增加&#xff0c;助力OpenHarmony在PC领域实现新的突破&#x…...

编程日记 2024/3/1 3:56:26

LeetCode每日一题2673. Make Costs of Paths Equal in a Binary Tree

文章目录 一、题目二、题解 一、题目 You are given an integer n representing the number of nodes in a perfect binary tree consisting of nodes numbered from 1 to n. The root of the tree is node 1 and each node i in the tree has two children where the left ch…...

编程日记 2024/3/1 3:55:25

射频滤波器设计实战：从理论原型到电路实现

1. 射频滤波器设计入门&#xff1a;从理论到实践的桥梁 第一次接触射频滤波器设计时&#xff0c;我被各种专业术语和数学公式搞得晕头转向。直到有一次&#xff0c;我在调试一个2.4GHz的Wi-Fi模块时&#xff0c;发现信号中混入了大量的邻频干扰&#xff0c;这才意识到滤波器设…...

编程新知 2026/4/17 18:09:50

Ghost Explorer：管理GHO格式映像文件与提取数据的最佳实践

你是否曾经因为一个GHO系统备份文件里混入了病毒，而不得不重新制作整个镜像？是否曾经为了从旧电脑的GHO备份中找回几张照片，而将整个系统恢复了一遍？这些问题都可以通过一款专用工具解决。Ghost Explorer（Ghost浏览器）是赛门铁克Ghost附带的实用程序，专门用于管理GHO格式…...

编程新知 2026/4/17 17:53:37

基于FPGA进位链的TDC高精度延时链设计与实现

1. FPGA进位链与TDC基础原理 时间数字转换器&#xff08;TDC&#xff09;是测量两个事件之间时间间隔的关键器件&#xff0c;在激光测距、高能物理实验等领域有广泛应用。传统ASIC方案成本高、周期长&#xff0c;而FPGA凭借其可编程特性成为理想替代方案。这里我们要重点利用的…...

编程新知 2026/4/17 17:21:00

别再只用微信授权了！手把手教你用小程序云开发实现账号密码登录注册（附完整源码）

突破微信授权限制&#xff1a;小程序云开发构建完整账号体系实战指南 每次看到小程序弹出"微信授权登录"的界面时&#xff0c;你有没有想过——如果用户拒绝授权&#xff0c;你的应用就彻底失去了这个用户&#xff1f;去年我们团队就遇到过这样的尴尬&#xff1a;一个…...

编程新知 2026/4/17 17:00:46

告别Windows？在Deepin/UOS上搭建专业GIS工作流（QGIS 3.18 + 国产OS）

国产操作系统上的GIS革命&#xff1a;QGIS全栈工作流深度实践 当越来越多的企业和机构开始关注技术自主可控&#xff0c;国产操作系统的成熟度正在经历一场静悄悄的革命。作为地理信息领域的从业者&#xff0c;我花了三个月时间将日常工作环境完全迁移到Deepin系统&#xff0c;…...

编程新知 2026/4/17 16:13:16

源代码论文分享｜做“系统设计与实现”类题目时，真的很需要这种成套资料！

很多人做课程设计、毕业设计时&#xff0c;最难的不是“不会写”&#xff0c;而是不知道一篇完整的“系统设计与实现”到底该长什么样&#xff1a;论文怎么展开&#xff0c;代码怎么组织&#xff0c;功能怎么落地&#xff0c;截图和结构图放到哪里才顺。 我自己当年做这类题目的…...

编程新知 2026/4/17 16:07:00

把KQM6600空气检测数据送上云端：基于ESP8266/ESP32的物联网空气质量监测站DIY

基于ESP8266/ESP32的物联网空气质量监测站DIY&#xff1a;从KQM6600数据采集到云端可视化 在智能家居和工业物联网快速发展的今天&#xff0c;空气质量监测已成为环境感知的重要一环。KQM6600作为一款高性价比的空气质量检测模块&#xff0c;能够精准测量VOC、甲醛和CO2浓度&a…...

编程新知 2026/4/17 15:04:13

如何用Open-Lyrics实现AI字幕生成：3步搞定多语言视频本地化

如何用Open-Lyrics实现AI字幕生成&#xff1a;3步搞定多语言视频本地化 【免费下载链接】openlrc Transcribe and translate voice into LRC file using Whisper and LLMs (GPT, Claude, et,al). 使用whisper和LLM(GPT&#xff0c;Claude等)来转录、翻译你的音频为字幕文件。 …...

编程新知 2026/4/17 14:26:52

Path of Building完整指南：如何用流放之路Build规划器打造完美角色

Path of Building完整指南&#xff1a;如何用流放之路Build规划器打造完美角色 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building&#xff08;PoB&#xf…...

编程新知 2026/4/17 14:20:48

小米手表表盘设计终极指南：如何快速设计个性化表盘

小米手表表盘设计终极指南&#xff1a;如何快速设计个性化表盘 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create 你是否厌倦了千篇一律的小米手表表盘&#xff1…...

编程新知 2026/4/17 13:29:40