弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?
一、场景
- 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
- 问题：后端返回了展示的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…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...
9-Oracle 23 ai Vector Search 特性 知识准备
很多小伙伴是不是参加了 免费认证课程（限时至2025/5/15） Oracle AI Vector Search 1Z0-184-25考试，都顺利拿到certified了没。 各行各业的AI 大模型的到来，传统的数据库中的SQL还能不能打，结构化和非结构的话数据如何和…...
智能职业发展系统：AI驱动的职业规划平台技术解析
智能职业发展系统：AI驱动的职业规划平台技术解析 引言：数字时代的职业革命 在当今瞬息万变的就业市场中，传统的职业规划方法已无法满足个人和企业的需求。据统计，全球每年有超过2亿人面临职业转型困境，而企业也因此遭…...