通过Ajax注入Bootstrap组件

Question

I've got a problem with injecting a Bootstrap component via ajax. When I add eg a select, I use this line of code:

<select class="selectpicker" data-width="75%">

And a lot of HTML code is generated via javascript, see: http://silviomoreto.github.io/bootstrap-select/

So, when I try to inject code eg after submitting a form:

    $('#xForm').submit(function(event) { 
       var _select = '<select class="selectpicker" data-width="75%">';
       $("#data").append(_select);
    });

The element will be added to DOM just like it is, without being transformed like the above. How can I re-call the function, that creates the whole code around the selectpicker after the page is loaded?

I hope you know what I mean.

Thanks!

Btw: on jQueryMobile it would work with $(_select).appendTo("#data").trigger('create'); - on Bootstrap unfortunately not!

Answer 1

Try

Enable Bootstrap-Select via JavaScript: $(el).selectpicker()

$('#xForm').submit(function (event) {
    var _select = '<select class="selectpicker" data-width="75%">';
    $(_select).selectpicker().appendTo("#data");
});