解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题

场景：

我们在日常开发过程中，不可避免的会在前端 js 中使用 append 动态的追加元素标签，但新追加的元素标签，不会响应追加前添加的事件和 css 样式信息，今天遇到这个问题，查询总结了一下解决办法。

解决办法：

首先，解决下使用 append 动态追加元素后，不会响应原有事件：

根据百度里面大佬帖子可知: append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。要使新添加的元素也能响应原有事件，则绑定事件时，需用用到 jquery 的 on 方法，代码如下：

$("#optionDiv").on('click', "button[name='delBtn']",function(){//获取当前页面剩余的属性框个数var index = $("#optionDiv").find("div").length;if (index == 1) {tip.alert("至少需要一组可选值。");return false;}$(this).parent().remove();});

格式： $("父元素").on("事件类型", "需用被绑定事件的元素", function(){})

通过上面使用 jquery on 方法绑定后，在文档加载完成后追加的元素标签也就都能响应原有事件。

再解决下不会响应 css 的问题，为什么不会响应 css 样式这个问题，具体的我不是很懂，就直接上代码了。

我这边是需要添加一组标签，先用数组对象保存，然后再使用 append 追加到父容器(optionDiv)中，注意上图中圈出来的红色部分，我原先写法是按照空串切割，即

$("#optionDiv").append(optionArr.join(""));

但这样写，就会造成我 css样式异常，后面经过查找和尝试，改成使用换行符进行切割就没问题了

$("#optionDiv").append(optionArr.join("\n"));

具体原因未知，我猜测应该是按空串切割的话，可能是把一整行标签分割成好几行，导致样式异常，我改成换行后就可以了。

网上还有大佬列出的方法

$("#所在标签id").trigger("create");

在我本地无效，不知道为什么。

好了，以上就是今天遇到append动态追加元素标签，不响应原有事件和css样式错乱问题的解决办法，如有其它更好的解决办法，欢迎大家提出来。

解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题相关推荐

jquery动态追加html,jQuery中几种动态追加元素的方法
几乎所有网站的开发都离不开jQuery,jQuery可以很方便的实现网页中的一些效果,也很轻松的对网页中的一些DIV元素进行添加,修改或删除的操作.今天我们就说一说,如何对网页中某个指定的DIV进行元 ...
JS中给一个对象动态追加key
var data = {}; data['key1'] = "哈哈哈"; var variable = 'key2'; data[variable] = "嘿嘿嘿&quo ...
解决intellij idea中使用live edit插件不能在chrome即时显示css变化的方法（html可以）
解决intellij idea中使用live edit插件不能在chrome即时显示css变化的方法(html可以) 参考文章: (1)解决intellij idea中使用live edit插件不能在 ...
解决给word中表格设置“跨页断行”后出现大片空白
解决给word中表格设置"跨页断行"后出现大片空白在写文档时出现了如下难堪情景,那个字他就是不到下一页去,它不想分开,就硬给它分开. 解决办法:在表格处右击,"表格属性 ...
html文本显示状态代码中表示什么,HTML文本元素标签
表示关键字和产品名称如:查看效果效果:加粗查看效果表示重要的文字如:查看效果效果:加粗查看效果强制换行如: 查看效果效果:在浏览器显示换行查看效果安全换行,一般只用于英文 ...
云客Drupal源码分析之前端js中的翻译
从本主题开始<云客Drupal源码分析>系列将连续发布和前端js相关的内容,如果您对JavaScript还不熟悉或者需要来一次系统性的整理回顾,在此云客为您准备了以下资料: <PHP ...
前端 ---JS中的面向对象
JS中的面向对象创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 JS ...
解决nw.js中无法播放mp3音频问题
最近有个项目使用nw.js开发的桌面应用,在开发中发现nw.js默认不能播放mp3,我是用的版本是最新的nwjs-v0.16.1-win-64版本的.由于MP3编码属于专利编码,非开源授权的,所以在n ...
前端---js中onmouseover和onmouseout事件
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmo ...
c语言一个数组后添加元素append,jQuery 追加元素、拼接元素的方法总结（append、html、insertBefore、before等）...
1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同 (1) append()方法: $("#test&quo ...

解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题

解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题相关推荐

最新文章

热门文章