弹窗内容由后端返回，如何让点击按钮的事件交由前端控制?
一、场景
- 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
- 问题：后端返回了展示的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…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...