layui二级联动，append之后事件失效

蔚落 2023-03-13 11:59 29阅读 0赞

*  二级联动，和多级联动很多地方都有用到
 *  如：组织架构，地理位置等，一般联动的处理都是前端js来进行动态生成
 *  需求，当前端选择部门后，能自动更新此部门所有人列表  
    ![在这里插入图片描述][20200513154134503.png]

# 分析HTML结构 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]  
这里我们看到`layui`的`select`标签的结构是这样的，我们需要做的是，每次选择部门向后台请求所选部门的用户信息，清空当前数据，将后台数据填充

form.on('select(department)', function(data){ 
                    var department = $('#department[name=department]').val()
                    $.ajax({ 
                        type:'post',
                        url:"{ {route('ajax_user')}}",
                        data:{ department:department},
                        success:function (data) { 
                               if (data.status_code ==200){ 
                                   $('#user').empty()
                                  $('#user').next().children('dl').empty()
                                   $('#user').next().children('dl').append('<dd lay-value="-1" class="layui-this"></dd>')
                                   $.each(data.data,function (index,value) { 
                                       $('#user').append('<option value="'+value.id+'">'+value.member.NAME+'</option>')
                                       $('#user').next().children('dl').append('<dd lay-value="'+value.id+'" class>'+value.member.NAME+'</dd>')
                                       
                                   })
                                   form.render();
                                   
                               }
                        }
                    })
                });

> 注意：动态添加的标签是无法触发layui的事件的，需要使用`form.render()`重新渲染一遍

[20200513154134503.png]: /images/20230312/156dfcabbcc84fb9a67bac3471e70f04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]: /images/20230312/ed90b339593d4e2e90cb55cd99739bfe.png