WEB基础之innerHTML添加标签后class触发js的问题

最新推荐文章于 2024-03-05 14:37:18 发布
最新推荐文章于 2024-03-05 14:37:18 发布
阅读量1.2k 收藏
点赞数
分类专栏： JAVA基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38990811/article/details/73564943
版权
本文讨论了在WEB开发中，使用innerHTML添加标签后如何处理class触发的JavaScript问题。推荐使用jQuery的on方法进行事件绑定，通过事件委托将新生成的DOM元素的事件绑定到父容器，例如绑定click事件到具有child类的动态插入div，其父容器id为'parent'。
摘要由CSDN通过智能技术生成

先说下事件绑定：可以了解一下比较新的jQuery版本中的的on方法，基本上可以取代之前习惯用的事件绑定的方法了。然后用下面这样的方法就可以给动态添加的dom绑定事件了，思路就是将新生成的元素类的事件委托给一开始就存在的父容器进行处理。假设动态插入的div类名是.child,他们的父容器id是#parent

最低0.47元/天 解锁文章
呆呆_小茗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
class-change:一个微库，用于处理CSS类名，使用HTML数据属性触发更改事件以及创建与声明性的类相关的事件侦听器
05-07
class-change.js 通用的替代方法，用于处理CSS类名称，使用HTML数据属性触发更改事件以及使用简单的声明性API创建与类相关的事件侦听器。 -文档和用法示例 联系与支持 为错误报告，功能请求或问题创建问题 关注以获得公告 添加一个 :star: 或 :red_heart: 支持该项目！ 执照 该项目已获得MIT许可。 有关详细信息，请参见。 版权所有（c）John Hildenbiddle（ @jhildenbiddle ）
关于innerHtml()插入的代码样式失效
qq8693的博客
01-25 5458
          最近公司要求研发一个手机适应的HTML页面，所以采用了BootStrap框架，页面很简单，就是根据用户输入的四个值，发送AJAX请求，去调用webservice接口得到json数据，把数据通过.innerHTML方法追加到id为neirong的div中，作为一个表格显示在下方，其中表格也是需要带class属性，带有Boo...
innerHTML写入元素后添加方法
qizi_的博客
03-30 733
当需要动态插入元素时,插入的元素往往添加class样式于onclick方法失效. 这种情况是因为插入之前class与js代码已被读取 所以这里就解决方案原理是插入元素的同时给予它添加点击事件与内联样式 vessel.innerHTML = "<video style='width: 100%;height: 100%;background: #31313180;' class='camera-play'></video>"; document.querySelectorAll
html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性
weixin_32868705的博客
06-28 553
文本1//首先获取标签对象var p = document.getElementById("text1");//通过对象自带的style方法设置不同的样式p.style.backgroundColor = "black";p.style.fontSize = "20px";//上面是给p标签设置两个样式，背景颜色和字体大小说明：css样式中的属性带“-”的属性名，转换成驼峰格式使用2.innerH...
JavaScript自动触发事件
热门推荐
九天翔龙的技术博客
02-17 1万+
有时候，我们需要代码自动触发对应的事件，而不需要人为操作。比如，一个按钮的点击事件，不要点击它，而让它自动执行。 首先定义事件，先按照传统的 onclick 方式来。（这里以点击某个标签事件为梨） var xx = document.getElementById("xx"); xx.onclick = function(){ alert( this.innerHTML ); ...
js获取class的所有元素
10-27
在JavaScript中，获取具有特定类名的...整个知识点涉及到了JavaScript的DOM操作和浏览器兼容性问题，对于前端开发人员来说是非常基础且重要的部分。理解和掌握这些基础知识点将有助于开发出能够跨浏览器运行的Web应用。
JavaScript核心基础到进阶之路1
08-03
JavaScript是Web开发中的重要语言，尤其对于前端开发者来说，它是构建动态网页和交互式应用程序的基础。本文将深入探讨JavaScript的核心基础知识以及进阶概念，包括DOM、BOM和事件处理。 DOM（Document Object ...
js控制web打印(局部打印)方法整理
12-10
JavaScript 控制 Web 打印（局部打印）方法详解 在 Web 开发中，有时我们需要提供一个功能让用户仅打印页面的特定部分，而不是整个页面。这通常被称为局部打印。以下是一些 JavaScript 实现局部打印的方法： 1. ...
JS-WebAPIS(四)-学生信息表案例
01-19
在本篇中，我们将深入探讨JavaScript的Web API在创建学生信息表案例中的应用。JavaScript作为前端开发的核心语言，其Web API提供了丰富的功能，使我们能够与浏览器进行深度交互，实现动态网页和数据处理。在这个“JS...
learning-web-component：学习vanilla js Web组件
02-20
在本项目“learning-web-component”中，我们将深入探讨如何使用纯JavaScript（vanilla js）来实现Web组件。Web组件的核心特性包括自定义元素、Shadow DOM、模板以及属性和事件的绑定。以下是对这些知识点的详细解释...
使用innerHTML插入元素设置class不生效
最新发布
larea的博客
03-05 775
在 js 中通过 .innerHTML 添加元素到页面中元素可以渲染到页面中，并且控制台中可以看到 class ，但样式不生效。
JavaScript--innerHTML与className
海向的博客
12-03 1161
innerHTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ display: block; height: 60px;
vue中class类名根据绑定的值三元表达式或字符串拼接动态添加类名
格の调
01-08 1727
如下这个html标签，最终根据数据返回值是，1则表示男性，2则表示女性，渲染2种不同的icon图标。 <span class=“gender bg-muted fa-nanxing”></span> <span class=“gender bg-muted fa-nvxing”></span> 有2种实现方法： 1、数组方法 <span :class='["gender","bg-muted",data.gender===1 ? "fa-nanxing
拼接html，但是class没有渲染效果
m0_37626203的博客
10-17 1658
用了一下拼接html，以前也用过，但是没怎么注意过。毕竟以前的都没有问题。那么，现在出现了拼接完成，class没有渲染效果。 网上搜了一下，答案很简单：$.parser.parse('# 您的id'); 这就解决了，本来上网搜就可以的。但是，还是记录一下吧。
html id中拼接c,如何动态拼接出.Where(c => List.Contains(c.Id));
weixin_35125597的博客
06-10 291
public Expression> ContainsPredicate(T[] arr, string fieldname) where TEntity : class {ParameterExpression entity = Expression.Parameter(typeof(TEntity), "entity");MemberExpression member = Express...
html5动态切换class,页面滚动时为元素动态添加class类的jquery插件
weixin_29774679的博客
06-07 878
jquery-scrollAddclass是一款可以在页面滚动时为元素动态添加class类的jquery插件。你可以定制自己的class类，使元素在进入视口时产生指定的动画效果。使用方法在页面中引入jquery和imagesloaded.js文件，以及jquery-scrollAddClass.js文件。初始化插件在页面DOM元素加载完毕之后，通过下面的方法来在指定的元素上添加指定的class类。...
html 动态增加class,vue中动态添加class类名的方法
weixin_39901412的博客
06-07 1027
这篇文章主要为大家详细介绍了vue中动态添加class类名的方法，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！vue 动态添加class类名，灵活得让你发狂，下面示例几个代码如下：动态添加类名对象的形式(文字的颜色)对象的形式(文字的颜色)三元表示式(文字的颜色)数组的形式(文字的颜色)数组中使用对象(文字的颜色)通过方法设置class类名代码...
JS快速学习之 innerHTML className display
李昊轩的博客
07-03 515
innerHTML 属性用于获取或替换 HTML 元素的内容 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML</title> </head> <body> <h2 id="con">javascript</H2&
css简易的进度条
qq_45723045的博客
10-22 836
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
DOM模型与JavaScript交互基础
"DOM简介，JavaScript和CSS web基础教程" 在Web开发中，DOM（文档对象模型）扮演着至关重要的角色。DOM是一个标准，用于表示和操作HTML或XML文档的结构化表示。它将网页内容解析为一个节点树，每个节点代表页面上的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呆呆_小茗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值