场景：

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

解决办法：

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

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

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

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

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

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

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

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

网上还有大佬列出的方法

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

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