200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html追加没有样式 js/jquery动态添加html 样式和方法不生效的解决方案

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

时间:2020-04-30 02:42:31

相关推荐

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

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。