弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?
一、场景
- 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
- 问题：后端返回了展示的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…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...