0

我必须创建刷新(用所有 HTML 刷新整个聊天框)聊天框,并且在聊天框内,我有一个引导开关。这个开关也替换为我的代码。

更换整个元素后。自举开关停止工作。我决定删除所有按钮 HTML 并重新添加开关。(如果有开关刷新方法,最好在我的代码中添加)。

我试过这个,

jQuery('.bootstrap-switch-wrapper').remove();

似乎这对任何事情都没有影响。问题就在那里。对这些人有什么建议吗?

我正在调整聊天框的宽度。这就是我替换 HTML 的方式。

var short_col = "<div id='short_column' class='col-lg-7 col-sm-6 col-xs-12 box-column' style='margin-bottom: 80px;'>";
var long_col  = "<div id='long_column' class='col-lg-12 col-sm-12 col-xs-12 box-column' style='margin-bottom: 80px;'>";
var div_close = "</div>";
var myContent = jQuery('.myContent').html();

if(showing_lbox){
    // When showing another box in same row
    jQuery('.box-column').replaceWith(short_col+myContent+div_close);
}else{
    jQuery('.box-column').replaceWith(long_col+myContent+div_close);
}
}
4

2 回答 2

1

这很可能是因为引导开关除了原始复选框之外还添加了一些 DOM 元素

尝试先调用destroy方法,然后删除复选框:

$('.bootstrap-switch-wrapper').bootstrapSwitch('destroy');
$('.bootstrap-switch-wrapper').remove();

编辑(更新问题后)

如果您唯一需要做的就是添加/删除某些类,则无需替换内容

假设你有这个 html:

<div id='some_column' class='col-lg-7 col-sm-6 col-xs-12 box-column short' style='margin-bottom: 80px;'>

这将改变类:

var $some_column = $("#some_column");
var shortClasses = "col-lg-7 col-sm-6 short";
var longClasses = "col-lg-12 col-sm-12"
if($some_column.hasClass("short"))
    // When showing another box in same row
    $some_column.removeClass(shortClasses).addClass(longClasses);   
}else{
     $some_column.removeClass(longClasses).addClass(shortClasses); 
}

查看工作示例

于 2016-04-27T04:43:54.773 回答
0

假设新的 html 是通过 ajax 创建的,您只需为成功事件中的 ajaxed 数据再次绑定 bootstrapSwitch 事件

success:function(data){
//append the data
$('.bootstrap-switch-wrapper').bootstrapSwitch();
}
于 2016-04-27T04:49:44.073 回答