弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?
一、场景
- 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
- 问题：后端返回了展示的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>
相关文章：
弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?
一、场景 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至…...
[数据结构 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树的性能 问题引…...
深入理解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…...
HTTP详解（HTTP的特点，状态码，工作原理，GET和POST的区别，如何解决无状态通信）！！！
文章目录 一、HTTP协议简介二、HTTP的主要特点三、HTTP之URL四、Request和Respons五、HTTP的状态码六、HTTP工作原理七、GET和POST请求的区别八、解决HTTP无状态通信——Cookie和Session 一、HTTP协议简介 HTTP协议是Hyper Text Transfer Protocol（超文本传输协议&…...
【QT+QGIS跨平台编译】之五十七：【QGIS_CORE跨平台编译】—【VECTOR_TILE生成】
文章目录 一、protoc二、生成来源三、构建过程一、protoc Protocol Buffers（简称 protobuf）是一种轻量级、高效的数据序列化框架，它可以将结构化数据序列化为二进制格式，同时还可以进行反序列化和数据压缩。相比于 XML 和 JSON 等传统的文本序列化格式，protobuf 采用二进制…...
2024年腾讯云优惠政策_腾讯云TOP10优惠活动
腾讯云服务器多少钱一年？62元一年起，2核2G3M配置，腾讯云2核4G5M轻量应用服务器218元一年、756元3年，4核16G12M服务器32元1个月、312元一年，8核32G22M服务器115元1个月、345元3个月，腾讯云服务器网txyfwq.co…...
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…...
qt5与qt6的cmake区别
文章目录 使用cmake构建qt项目，坑很多。一是本身就麻烦，二是，确实坑，因为不同的qtcreator版本，选了不同的kits（套件） 生成的CMakeList.txt文件也不一样。 如果可以的话都选择Qt6的相关选项&…...
【计算机网络】一些乱七八糟内容
MAC Media Access Control 用于在局域网（LAN）或广域网（WAN）中实现设备自动接入网络 "载波侦听多路访问"(Carrier Sense Multiple Access) CSMA/CD 是CSMA的升级版本，加入了序列号检测机制。 CSMA/CA 是CSM…...
基于ESP32的MicroPython项目量产烧写指南
背景 前段时间用MicroPython开发了一个项目，硬件是ESP32-C3，目前准备量产，我需要提供固件以供加工厂批量烧录，需要把我有程序的板子里的程序读出来，然后下到别的板子上，以下做这件事情的过程记录。 1.固件…...
线性规划的标准型转换
对于任意给定的线性规划的问题，其实其本身可能是不符合线性规划标准型的需求的，但是如果通过一系列的等价变化的话，是可以将该问题转换为标准型的线性规划问题，例如如下的线性规划问题: 添加图片注释，不超过 140 字&am…...
机器学习：探寻智能化时代的科技奇迹
在数字化浪潮席卷全球的今天，机器学习已然成为科技领域的一颗璀璨明星，引领着人工智能不断向前发展。那么，机器学习究竟是什么？它为何能在众多科技中脱颖而出，成为改变世界的力量？本文将带您一探究竟&#…...
《Flask入门教程》学习笔记
《Flask入门教程》官网：https://tutorial.helloflask.com/ 目录 第一章：准备工作第二章：Hello, Flask!第三章：模板第四章：静态文件第五章：数据库第六章：模板优化第七章：表单第八章&a…...
go语言基础 -- map的定义与使用
map的定义与使用 map声明基础语法map的基本使用map的遍历map切片map排序 map声明基础语法 // map的声明 var xxx_map map[key_type]value_typemap的key可以是基本数据类型，channel，接口，结构体，数组，但不能是slice&am…...
讯方·智汇云校第五期名师班火热报名中！
第三期名师班回顾 授课情况 课堂上，同学们热情高涨，积极参与互动。他们紧跟名师的步伐，深入探索云服务的奥秘。张梁老师在为同学们讲述完知识点后，会根据所讲知识给同学们布置对应的实验，由同学们分组讨论练习。 每…...
为什么企业需要使用云电子邮箱？
作为一家机构的负责人，您比大多数人都清楚，您的工作日不会在下午5点就结束。很可能，当您的员工已经打卡下班回家很久之后，您还在以这样或那样的方式继续工作。作为一名企业主，埋头苦干对您来说并不是什么新鲜事&#x…...
[DEBUG] spring boot-如何处理链接中的空格等特殊字符
问题： get或者post中提交的内容可能有空格、#等特殊字符，不做处理的话可能解析错误。 解决： html中： <a th:href"{/listSgrna(id${item.getGeneId()},geneName${item.getGeneName()},genome${genome},sgrnaNum${sgrnaN…...
通过配置数据库事件（Event）来实现定时导出 MySQL 数据库
首先，确保 MySQL 服务器已启用事件调度器功能。你可以通过以下 SQL 语句查询： SHOW VARIABLES LIKE event_scheduler; 如果 event_scheduler 的值为 ON，则表示事件调度器已启用；如果为 OFF，则可以使用以下语句启用&…...
基于x86架构的OpenHarmony应用生态挑战赛等你来战！
为了更快速推进OpenHarmony在PC领域的进一步落地，加快x86架构下基于OpenHarmony的应用生态的繁荣，为北向应用开发者提供一个更加便捷的开发环境，推动OpenHarmony北向应用开发者的增加，助力OpenHarmony在PC领域实现新的突破&#x…...
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…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...