解决前端 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样式错乱问题的解决办法,如有其它更好的解决办法,欢迎大家提出来。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页