Entfernen Bootstrap-Schalter HTML-Element

Question

Ich musste erstellen (Aktualisieren der gesamten Chatbox mit allen HTML) Chatbox und in der Chat-Box, habe ich einen Bootstrap-Schalter. und dieser Schalter ersetzt auch mit meinem Code.

nach dem Ersetzen des gesamten Elements. Der Bootstrap-Switch funktioniert nicht mehr. und ich beschloss, den HTML-Code für alle Schaltflächen zu entfernen und den Switch erneut hinzuzufügen. (Wenn eine Switch-Refreshing-Methode, ist gut, in meinem Code hinzuzufügen).

Und ich versuchte dies,

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

scheint dies nicht für etwas bewirken wird. Problem dort an. Irgendwelche Vorschläge für diese Leute?

Ich passe die Breite der Chatbox an. So habe ich meinen HTML-Code ersetzt.

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

Answer 1

Dies ist höchstwahrscheinlich, weil Bootstrap-Schalter einige DOM-Elemente zusätzlich zu den ursprünglichen Kontrollkästchen

Versuchen Sie, rufen Sie destroy Methode der ersten und entfernen Sie dann die Kontrollkästchen fügt hinzu: EDIT

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

(Nach dem Aktualisieren der Frage)

Wenn das einzige, was Sie tun müssen, ist einige Klassen hinzufügen/entfernen, müssen Sie nicht die Inhalte, die Sie haben diesen HTML

Angenommen ersetzen:

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

dies die Klassen ändern:

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

Siehe working example

Answer 2

Sobald der neue HTML-Code über Ajax erstellt wurde, müssen Sie das bootstrapSwitch-Ereignis erneut für die Ajax-Daten im Erfolgsereignis

binden

success:function(data){ 
//append the data 
$('.bootstrap-switch-wrapper').bootstrapSwitch(); 
}