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

var html = "

" +

" " +

" \n" +

" \n" +

" \n" +

" \n" +

"

";

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

})