JS动态渲染了按钮，再添加监听事件

最新推荐文章于 2024-09-08 19:46:36 发布
最新推荐文章于 2024-09-08 19:46:36 发布
阅读量768 收藏 1
点赞数
分类专栏： html JS 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38192709/article/details/120199780
版权
当使用JS动态创建并渲染按钮时，为这些按钮添加监听事件可能遇到问题。解决方法是在`window.onload`函数中进行事件绑定，确保在页面元素加载完毕后再执行，以避免因元素未加载而导致的监听失效。
摘要由CSDN通过智能技术生成

问题描述： 如下， 这些按钮是JS 动态渲染的，如果要添加监听事件，怎么办呢？
在这里插入图片描述

问题解决： 把添加监听的 JS 放在 window.onload = function() {} 函数里面即可，放在外面的时候，我自己的环境是没有生效。

window.onload = function () {
   
	let copyMores = document.getElementsByClassName('btn-more')
最低0.47元/天 解锁文章
叫我福建
关注
专栏目录
vue动态渲染svg、添加点击事件
【前端 · 小讴】的博客
03-12 8308
欢迎关注[前端小讴的github]，阅读更多原创技术文章 业务需求(vue项目中) 1.v页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用**Vue.extend()**方法完整实现，代码也较为简洁，html结构如下： &...
Layui事件监听的实现(表单和数据表格)
10-16
2. **表格渲染与事件监听**：使用`table.render`方法渲染表格，并通过`toolbar`参数指定工具栏ID。然后，使用`table.on`监听工具栏事件，例如： ```javascript layui.use('table', function() { var table = ...
JavaScript 事件监听
qq_52265298的博客
02-18 618
addEventListener 是用来向指定元素添加事件监听器的方法。你可以使用它来指定事件触发时执行的函数。useCapture（可选）: 一个布尔值，指定事件是在捕获阶段还是冒泡阶段处理。一般设置为 false。这样，当按钮被点击时，控制台会输出 '按钮被点击了！你可以根据需要修改事件类型和事件处理函数。
如何为js控件添加事件监听
不积跬步,无以至千里;不积小流,无以成江海
09-12 5724
我们在制作网页时，常常要制作一些js控件。各js控件虽然制作出来后，但有时要在一起使用时，调用到同样的事件就会引起冲突。 如editselectunit和editselectrole控件同时使用到了document的onclick事件。此时，如果在这两个事件的处分别编写如下document.onclick = function() { alert('unit');}; documnet.oncl
JS中给元素添加事件监听器的各种方法详解（包含比较和应用场景）
2301_79858914的博客
09-08 1311
方法优点缺点使用场景HTML 内联事件简单、直观代码难维护，无法绑定多个处理程序非常简单的页面或一次性项目DOM 事件属性简单、与 HTML 分离覆盖问题，无法绑定多个处理程序简单页面交互支持多个处理程序，解除事件监听，事件委托，控制捕获和冒泡需要考虑老旧浏览器兼容性现代 Web 开发，复杂交互场景事件委托性能好，支持动态元素不适用于不冒泡的事件，手动筛选目标动态子元素或大量子元素的事件处理兼容旧版 IE非标准，事件处理不一致仅用于兼容 IE8 及以下。
JavaScript动态监听事件使用
weixin_39218464的博客
10-04 1106
1、冒泡事件原理，由里到外依次执行 2、addEventListener动态绑定监听事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
关于页面更改重新渲染的监听
qq_37338658的博客
01-07 1331
vue vue渲染是异步的，存在dom diff对比 // 监听页面渲染完毕 this.$nextTick(function() { // 执行的操作 }) 应用场景 嵌套iframe页面,加载完数据后，子窗体向父窗体传递当前页面高度、宽度，做到高度、宽度自适应。 this.$nextTick(function() { window.parent.postMessage( ...
JS常见的按钮添加事件（含事件监听兼容写法）
KindleYoung的博客
12-08 5808
JS常见的按钮添加事件有三种方式 第一种：直接以属性节点的方式来添加： <button onclick="alert(123)">按钮1</button> 第二种：以事件属性的方式来添加： <button>按钮</button> <script> var oBtn = document.querySelector("button"); console.dir(oBtn); /* 注意点1：给标签添加
js渲染的按钮不能触发定义好的点击事件
weixin_42455301的博客
07-02 557
如果你的元素是用click事件append进来的（.html()同），那么你的功函数必须放在这个click事件里面。 比如： $(".clickMeToAppendElement").click(function() { $(".toBeAppend").append("<li><span><i class=\"icon J_classtree\">这是元素内容</i>"); $(".J_classtree").on("click",function(){
JS获取动态添加元素的方法详解
12-01
在JavaScript编程中，动态添加元素是一项常见的需求，特别是在构建交互丰富的网页应用时。本文将详细介绍三种获取这些动态添加DOM元素的方法。 ### 1. 模板引擎中添加行内事件 模板引擎允许我们在HTML模板中嵌入...
使用 addEventListener 为 JavaScript 动态创建的元素添加事件监听器
最新发布
09-12
在JavaScript中，为动态创建的元素添加事件监听器时，需要特别注意事件绑定的时机。通常，如果我们直接在元素创建之后使用`addEventListener`方法，可能会发现事件并没有按预期工作，因为此时可能还没有完成元素的...
JS--循环渲染页面以及添加点击事件 && JS提示信息显示编写
heavenz19的博客
07-26 875
JS–循环渲染页面以及添加点击事件 function goodsAll(keywords, is_show, type_id) { $.ajax({ url: urlLink + 'goods_all', data: { keywords: keywords, is_show: is_show, type_id: type_id, }, type: 'POST', dataType: "json", header: { 'content-type': 'mu
js动态添加按钮，并绑定点击事件
Ysmooth的博客
09-10 2766
目录ftl文件js文件 ftl文件 <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td width="100" valign="top" bgcolor="#eeeeee"> <table id="mytable" class="layui-table layui-form" l
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
weixin_28942523的博客
06-10 710
本文实例讲述了JS实现动态添加DOM节点和事件的方法。分享给大家供大家参考，具体如下：运行效果图如下：完整实例代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Js(DOM)动态添加节点和事件function addEl(){//找到要添加节点的父节点(table)var tb = document.ge...
js 能实现监听F5页面刷新子iframe 而父页面不刷新
chengzhi0081的博客
01-12 479
先讲一下流程： 监听F5事件，然后通过keycode判断。 reload iframe里面的页面，但是实际效果确实整个页面都刷新 最主要的一点：event.preventDefault();//阻止系统刷新。 下面贴出自己的代码： 父页面中的js window.doc...
uniapp中使用echarts，通过renderjs模式封装echarts，兼容APP和H5，一篇就够了！
weixin_45973179的博客
06-10 4541
一、UniApp中使用renderjs 1 为什么要使用 renderjs 某些h5端使用的插件涉及到大量的dom操作，无法跨端使用。 受限于框架视图层与逻辑层的分离而导致的通信折损，而导致的页面动画不流畅。 2 renderjs解决了哪些问题 renderjs是一种可以直接运行在视图层（webview）中的js技术，可以在视图层操作dom。 直接运行在视图层，解决了视图层与逻辑层频繁通信导致的性能折损，让动画更流畅。 3 兼容性 App H5 2.5.5+支持 ✔ 4
JS - 事件处理：鼠标移动监听事件、div块跟随鼠标移动事件、事件的绑定、实现拖拽效果
好看的皮囊千篇一律，有趣的灵魂万里挑一。
04-16 3394
在DOM中，每个HTML元素都可以绑定各种事件，例如点击事件（click）、鼠标移入事件（mouseover）、键盘按下事件（keydown）等。当事件发生时，可以触发相应的事件处理程序（事件监听器），执行特定的操作。
Vue render函数
weixin_42274805的博客
03-25 2238
Dom 在浏览器中通过js来操作DOM的操作性能很差，于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。 虚拟DOM并不是真正意义上的DOM，它作为一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，来更新发生变化的DOM，对于未发生变化的DOM节点，不予操作，由于不是全部重绘，大大提高更新渲染性能。 什么是render函数 在vue中我们使用模板HTML语法组建页面，通过render函数用js语言来构建DOM。 因为
uniapp中videojs、renderjs的使用
江拥羡橙的博客
10-09 2538
uniapp在APP端video层级最高，不能被其它覆盖，引入videojs实现，使用renderjs实现原生的DOM操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值