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

矫情吗；* 2024-04-19 13:04 3阅读 0赞

场景：

我们在日常开发过程中，不可避免的会在前端 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 样式这个问题，具体的我不是很懂，就直接上代码了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

网上还有大佬列出的方法

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/488ec65aa6f044848c668e4b38e0793e.png