Question

我使用bootstrap fpr设计网页。我希望能够将一段html代码插入到html模板中。但是，在插入之后，虽然我指定了类（selectpicker，它是bootstrap中的类），但select属于。新添加的select字段没有selectpicker类的css样式。如何在不重新加载网页的情况下使select字段保持css样式？

// Add a new experiment
$('button[name=addExperiment]').click(function(){
    var existingExperiments = document.getElementsByClassName('experiment');
    var newIndexStr = (existingExperiments.length+1).toString();
    $('div[name=formBody]').append('<div class="col-lg-6 col-md-6 col-sm-6 mb experiment">'+
                                       '<h4>Question'+newIndexStr+':</h4>'+
                                       '<label> Name*: </label>'+
                                       '<input type="text" name="experimentName" pattern="'+PATTERN_FOR_NAME+'" title="'+PATTERN_FOR_NAME_HINT+'" required>'+
                                       '<br>'+
                                       '<label>Description:</label>'+
                                       '<br>'+
                                       '<textarea class="longInput" cols="30" rows="5" name="experimentDescription" pattern="'+PATTERN_FOR_EXPERIMENT_DESCRIPTION+'" title="'+PATTERN_FOR_EXPERIMENT_DESCRIPTION_HINT+'"></textarea>'+
                                       '<div class="valueType">'+
                                       '<label>Value Type*: </label>'+
                                       '<select class="selectpicker" data-style="btn-inverse" data-width="auto" name="valueType" title="Choose A Value Type" required>'+
                                       '<option value="Text" selected="selected">Text</option>'+
                                       '<option value="Number">Number</option>'+
                                       '</select>'+
                                       '<div class="valueRange" style="display: none;">'+
                                       '<label>Value Range: </label>'+
                                       '<input type="text" name="valueRange" pattern="'+PATTERN_FOR_VALUE_RANGE+'" title="'+PATTERN_FOR_VALUE_RANGE_HINT+'">'+
                                       '</div>'+
                                       '<div class="valueCandidates" style="display: block;">'+
                                       '<label>Value Candidates: </label>'+
                                       '<input type="text" name="valueCandidates" pattern="'+PATTERN_FOR_VALUE_CANDIDATES+'" title="'+PATTERN_FOR_VALUE_CANDIDATES_HINT+'">'+
                                       '</div>'+
                                       '</div>'+
                                       '<label>Order Number: </label>'+
                                       '<input type="number" name="experimentOrder"  value='+newIndexStr+' min="1" step="1" required>'+
                                   '</div>');
});

Answer 1

感谢adeneo和Viters的帮助。我的问题的原因是我附加html代码后没有重新加载selectpicker（由bootstrap-select呈现）。在我的代码末尾添加这一行之后，问题就解决了。 here是相关文档的链接。

$('.selectpicker').selectpicker('render');

如何使新添加的html代码保持原始的CSS样式？

1 个答案: