js/jquery动态添加html，样式和方法不生效的解决方案

 var html = "<div class=\"radio-box\" style=\"padding-top: 0px;width: 100%\">" +
                   " <input type=\"checkbox\" th:id=\""+uuid+"\" name=\"content\" >" +
                   " <label th:for=\""+uuid+"\" style=\"width: 94%\">\n" +
                   " <input type=\"text\" class=\"form-control\"  name=\"content\"/>\n" +
                   " </label>\n" +
                   " <i class=\"fa fa-remove\" style=\"float: right;margin-top: 10px\"></i>\n" +
                   " <br></div>";
                $(this).before(html);

例1 样式

bootstrap checkbox和radio

页面上bootstrap 的样式没有生效

解决办法：

 // 渲染js拼接的radio,checkbox按钮
                $('input[type=checkbox]').iCheck({
                    labelHover : false,
                    cursor : true,
                    checkboxClass : 'icheckbox-blue',
                    increaseArea : '20%'
                });

// 渲染js拼接的radio,checkbox按钮
                $('input[type=radio]').iCheck({
                    labelHover : false,
                    cursor : true,
                    radioClass : 'iradio-blue',
                    increaseArea : '20%'
                });

例2

点击事件

此点击事件无效

$(function () {
            $(".fa-remove").click(function () {
                var tr = $(this).parent();
                        tr.remove();
            })
})

原因：

因为append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件没有生效。

解决方案：

事件委托。给所有的类名为.div的元素添加点击事件，将指定事件绑定在document上，只要而新产生的元素符合指定的元素，就会绑定此事件 ，而且这种方法当页面需要为多个节点初始化事件的时候，就不需要一个个加onclick事件。

$(document).on("click", ".fa-remove", function () {
            var tr = $(this).parent();
            tr.remove();
        })