动态添加的复选框元素有问题

问题背景

我在做项目过程中通过下拉框动态响应添加复选框之后，发现添加的复选框出现无法点击的状况，搞了好久也没有解决掉问题，随后我了解到可能是因为后添加导致部分功能缺失。了解到这种元素称为未来元素，要通过jquery来控制复选框的动态变化。
通过响应，添加的复选框代码为：

                    for (var i = 0; i < data.length; i++){
                        sb[sb.length]= '<input type="checkbox" name="roldIds" value="'+data[i].roleID+'" title="'+data[i].roleName+'" data-rule="checked">';
                        sb[sb.length]= '<div class="layui-unselect layui-form-checkbox layui-form-unchecked">';
                        sb[sb.length]= '<span>'+data[i].roleName+'</span><i class="layui-icon"></i>'
                        sb[sb.length]= '</div>'
                    }
                    $("#gridData").html(sb.join(''));

通过使用未来元素来添加的复选框，造成点击无法点击实现功能，通过jquery来实现效果，我的代码里面的复选框样式虽然是在div中，但是获取的时候是input的checked。所以通过以下按钮来实现功能：

        $(document).on('click','.layui-unselect',function(){
            var check = $(this).hasClass("layui-form-checked");
            if(check){
                $(this).parent('div').find('input').attr("checked","");
                $(this).removeClass('layui-form-checked')
            }else{
                $(this).parent('div').find('input').attr("checked","checked");
                $(this).addClass('layui-form-checked')
            }
        })

以上就是通过触发点击事件，来查看是否包含layui-form-checked类，然后进行复选框状态和样式的改变，这就是解决未来元素无响应的问题。
对于form表单未来元素数据提交问题
再后来form表单的提交问题上面，也出现了一部分问题，一般复选框提交的形式是多个数值以“,”隔开的字符串显示传到后台，但是未来元素形式的复选框无法传递到后台进行接收。这就需要去手动去获取复选框的选中状态，来对选中的数据进行处理。通过以下代码：

            var roleID = "";
            $("input[name='roldIds']:checked").each(function(){
                roleID+=$(this).val()+","
            });

可以把未来元素复选框的选中数据传给roleID，然后赋值给隐藏输入框就可以完成对复选框的数据处理，这样就把响应添加的复选框无响应的问题给解决了。