js append html 后点击点击事件和样式不生效_jsappendchild追加上的元素样式和事件都没有-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengxiaoya2017/article/details/107733022

在开发中遇到一个问题，当使用JS动态append HTML内容后，遇到Select2插件样式不生效和点击事件无法触发的问题。解决方法包括：针对样式问题，通过给新追加的元素添加特定class并初始化Select2来修复；而对于点击事件，通过监听父元素的on事件来捕获并处理子元素的点击行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个点击一个按钮追加一行的功能时，发现通过js代码append 的html 的点击事件和页面样式不生效。
在这里插入图片描述

 var tr = "<div id='appendDiv"+i+"' class='form-row'>                                                                  " +
           "        <div class='form-group col-1'><label>联系人姓名</label>                                               " +
           "            <input type='text' class='form-control' name='contact_name"+i+"' placeholder='姓名 ( 必填 )'>     " +
           "        </div>                                                                                               " +
           "        <div class='form-group col-1'><label>性别</label>                                                     " +
           "            <select type='text' class='form-control select2' name='contact_sex"+i+"'>                        " +
           "                <option value='男'>男</option>                                                                " +
           "                <option value='女'>女</option>                                                                " +
           "            </select>                                                                                        " +
           "        </div>                                                                                               " +
           "        <div class='form-group col-2'><label>手机号码</label>                                                  " +
           "            <input type='text' class='form-control' name='contact_phone"+i+"' placeholder='请输入手机号码 ( 选填 )'>   " +
           "        </div>                                                                                                            " +
           "        <div class='form-group col-2'><label>座机号码</label>                                                                " +
           "            <input type='text' class='form-control' name='contact_tel"+i+"' placeholder='请输入座机号码 ( 必填 )' required>   " +
           "        </div>                                                                                                              " +
           "        <div class='form-group col-2'><label>是否关键决策人</label>                                                            " +
           "            <select type='text' class='form-control select2' name='is_key_contact"+i+"'>                                     " +
           "                <option value='1'>是</option>                                                                                " +
           "                <option value='0'>否</option>                                                                                " +
           "            </select>                                                                                                        " +
           "        </div>                                                                                                               " +
           "        <div class='form-group col-2'><label>职务</label>                                                                    " +
           "            <input type='text' class='form-control' name='desc"+i+"' placeholder='请输入职务 ( 选填 )'>                        " +
           "        </div>                                                                                                               " +
           "        <div class='form-group col-2'><label></label>                                                               " +
           "             <div style=\"height: 15px;\"></div>                                                " +
           "             <div class='btn-action contectRow'  rowIndex='"+i+"' style='margin-top: 5px; text-align: left'><i class='iconfont icon-remove'>删除联系人</i></div>  " +
           "        </div>                                                                                                               " +
           "     </div>

首先样式问题，由于使用的是select2 插件，append 之后 class=“select2” 不生效，通过下面方式解决

   $("#myDiv").append(tr);
           //渲染新加入的下拉框
           $("select[name='contact_sex"+i+"']:last").select2();
           $("select[name='is_key_contact"+i+"']:last").select2();
           //重新计算页面高度
           reSizeIFrame();

2.append 中的html 页面点击事件不起作用，通过监听父元素div 的on 事件来实现。

    $("#myDiv").on('click', '.contectRow',function() {
        var rowIndex=$(this).attr("rowIndex")
        console.log("删除的序号:"+rowIndex)
        var elementById = document.getElementById("appendDiv"+rowIndex);
        elementById.remove();
        console.log("删除的序号"+i)
        if (i == 3) {
            i = i-2;
        } else {
            if (i > 0) {
                i--;
            }
 }