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(); })