Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在动态更改innerHTML后重新添加点击监听器?

如何在动态更改innerHTML后重新添加点击监听器?
EN

Stack Overflow用户
提问于 2017-10-31 13:23:46
回答 1查看 62关注 0票数 0

我正在尝试将标签转换为Shopify商店中通过第三方应用动态加载的内容中的标签,这意味着HTML是在页面加载完成后添加的。在我进行转换之前,标签已经通过第三方脚本添加了'click‘事件侦听器。

我当前的代码如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var widgetHTML = $(".cbb-frequently-bought-selector-list").html();
widgetHTML = widgetHTML.replace(/<a /g, '<span ').replace(/<\/a>/g, '</span>');
$('.cbb-frequently-bought-selector-list').html(widgetHTML);

在这段代码执行之后,原来的“click”事件侦听器就消失了。

有没有办法在所有标签上临时保存对所有现有'click‘事件侦听器的引用,然后执行上面的代码,然后将'click’事件侦听器重新添加到替换了这些标签的新标签上?

EN

回答 1

Stack Overflow用户

发布于 2017-10-31 13:26:11

像这样使用jQuery的事件委派:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).on('click','your_element_selector', function() {
   // your code    
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47036559

复制
相关文章
如何实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢?
前端老道
2022/03/29
4K0
【Java 进阶篇】JavaScript 动态表格案例
在这篇博客中,我们将深入了解JavaScript如何创建和操作动态表格。我们将从头开始构建一个动态表格,并逐步添加各种功能,使其能够实现数据的添加、删除和编辑。这个示例将有助于理解如何在前端开发中使用JavaScript创建交互性强大的表格。
繁依Fanyi
2023/10/19
3470
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
1:点击添加按钮弹出弹框,form表单可以填写相关的信息 2:点击保存按钮,相关信息会显示在界面的列表里
王小婷
2019/02/26
7.3K0
如何在Vue中动态添加类名
能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。
前端小智@大迁世界
2020/05/12
6.2K0
如何在 TypeScript 中为对象动态添加属性?
在 TypeScript 中,我们经常需要在运行时动态添加属性到对象上。这是因为 TypeScript 是一种静态类型语言,类型系统在编译时会检查代码的类型安全性,所以在编译时我们无法确定对象上将要添加哪些属性。在本文中,我们将讨论如何在 TypeScript 中为对象动态添加属性,以及这样做的一些注意事项。
网络技术联盟站
2023/06/07
11.7K0
动态网页(监听器)
它的作用与谍战片中的监听器相同,用来监听或监控你干了什么,只不过谍战片中监听对象是人,而动态网页中监听对象是代码。
全栈开发日记
2022/05/13
6170
entr:文件更改时重新运行构建
这是一篇简短的文章。我是最近才发现 entr 的,我很惊奇从来没有人告诉过我?!因此,如果你和我一样,那么我告诉你它是什么。
用户8639654
2021/09/14
6180
点击地图添加Marker
当我们往地图上添加marker时第一反应都是根据经度和维度来添加,却没有想到可以通过点击地图相应的位置添加marker,所以到底如何实现点击添加marker呢?
算法与编程之美
2021/11/23
1.2K0
quartz监控日志(二)添加监听器
上一章介绍监控job有三种方案,其实还有一个简单方案是实现quartz的TriggerListener。
一笠风雨任生平
2019/08/02
1.5K0
apktool重新打包添加签名
一.生成apk apktool b 反编译后项目目录 -o 新apk名称.apk 二.生成签名 keytool -genkeypair -alias 新apk名称.apk -keyalg RSA -validity 100 -keystore app.keystore #拓展 -genkey 生成秘钥 -alias 别名 -keyalg 秘钥算法 -keysize 秘钥长度 -validity 有效期 -keystore 生成秘钥库的存储路径和名称 -keypass 秘钥口令 -storep
小小咸鱼YwY
2020/07/01
7420
Css添加div点击态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .active { position: relative; width: 120px;
明知山
2020/09/02
4.8K0
【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性
JavaScript 是前端开发中不可或缺的一部分,它为我们提供了丰富的工具和技术,以便更好地操作和交互HTML页面。在本文中,我们将重点介绍JavaScript中的 innerHTML 属性,它是DOM(文档对象模型)的一部分,用于操作和更改HTML元素的内容。我们将深入了解这一属性的作用、用法和最佳实践,同时通过实际示例来帮助您更好地理解。
繁依Fanyi
2023/10/19
8830
更改host文件_添加host文件
国内无法访问GitHub的问题除了用某工具访问,还可以通过host文件来达到效果,缺点就是需要经常更新ip地址。
全栈程序员站长
2022/11/04
3.9K0
更改host文件_添加host文件
jquery导航栏点击及页面跳转后对应栏目添加选中效果
但是一般页面的导航栏都是需要跳转页面的,上面的方法只在当前页面有效,跳转后就失效了。
德顺
2019/11/13
4.5K0
jquery导航栏点击及页面跳转后对应栏目添加选中效果
【Java 进阶篇】JavaScript DOM Element 对象详解
JavaScript是一门广泛用于网页开发的脚本语言,而DOM(文档对象模型)是JavaScript在网页中操作HTML和XML文档的核心。DOM以树状结构表示文档,允许开发者以编程方式访问、操作和修改文档的内容和结构。在DOM中,Element对象是代表HTML元素的关键对象之一。本篇博客将详细介绍JavaScript DOM中的Element对象,帮助基础小白更好地理解和应用这一概念。
繁依Fanyi
2023/10/19
2890
wordpress更改固定链接后404
wordpress的固定链接对于博客的seo优化是非常重要的。因为有些默认设置并不怎么友好,所以我们可以自定义设置自己的想要的固定链接,比如自定义连接结构为:/%post_id%.html。但是往往我们更改之后会出现404页面,这是网站的伪静态出了问题。 下面是在不同环境下的不同解决方法。
SweetHunter
2020/05/10
2.1K0
点击加载更多

相似问题

更改innerHTML后,页面会自动重新加载吗?

31

动态更改innerHTML集

22

点击链接后的IE innerHTML

20

在JavaScript .innerHTML更改后重新获取<form>-元素值

13

删除后重新添加事件监听器--Javascript

122
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文