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

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

news 2026/2/7 10:16:46

一、场景

  • 背景：因为系统里经常有新活动或者公告需要通知所有用户，希望前端维护的这个弹窗里的内容可以由后端接口返回。这样就不需要每次上新活动的时候，前端项目都发版了。因此，前端维护了这个弹窗和它的关闭事件，至于弹窗里展示什么内容，则由接口返回。
  • 问题：后端返回了展示的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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/6 21:54:57

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/1/31 12:19:33

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25