动态填充 Bootstrap select 选择器：更改事件不起作用

Question

我有一个 Bootstrap Select 选择器，我必须在它加载后创建并动态添加到页面的 HTML 中。问题是，当我这样做时，选择器的 "change" 事件似乎没有被触发。

这是我的 jsFiddle：http://jsfiddle.net/83k458Lz/7/

（最终，下拉列表中的数据将通过 JSON 加载，但在示例中我已将其内联添加）。

代码在这里：

//The jsFiddle has a much more complete list of data
var lista_pueblos=[{"id":"2","nombre":"Madrid"},{"id":"4","nombre":"Barcelona"},{"id":"5","nombre":"Heidelberg"},{"id":"6","nombre":"Dusseldorf"}];

var dropdown='<select id="localidad_origen_1" name="localidad_origen_1" class="form-control selectpicker input-sm localidad_origen" data-live-search="true" required><option value="" selected disabled>Seleccione localidad</option></select>';

$("#formulario").after(dropdown);


rellenaPueblos($("#localidad_origen_1"), -1);
$('.selectpicker').selectpicker();
$('.selectpicker').refresh();    



$("body").on('change',".localidad_origen, .localidad_destino", function(){
    alert("Meeept");   
   });


function rellenaPueblos(dd, pueblo_anterior) {
        var cadena="";
        var elProximoEsElBueno=false;
        for (var i = 0; i < lista_pueblos.length; i++) {
            if (elProximoEsElBueno == true) {
                cadena += "<option SELECTED value='" + lista_pueblos[i]["id"] + "'>" + lista_pueblos[i]["nombre"] + "</option>\n";
                elProximoEsElBueno = false;
                }
            else {
                cadena += "<option value='" + lista_pueblos[i]["id"] + "'>" + lista_pueblos[i]["nombre"] + "</option>\n";
                }
            if (lista_pueblos[i]["id"] == pueblo_anterior) {
                elProximoEsElBueno=true;
                }
            }
        //alert(dd.name);
        dd.append(cadena);
        }

而 HTML 非常简单：

<form id="formulario">
</form>

如您所见，下拉列表已正确填充，但当我选择一个选项时，似乎没有触发 "change" 事件。我读过有关事件委托的内容，但如您所见，事件处理程序附加到 body。利用事件冒泡。

我还缺少什么？我怀疑这一定是真的很傻...

Answer 1

改变这个：

$('.selectpicker').refresh();

为此：

$('.selectpicker').selectpicker('refresh');

调用不存在的 refresh() 方法导致剩余代码无法执行。

已更正 fiddle：http://jsfiddle.net/BenjaminRay/83k458Lz/11/

动态填充 Bootstrap select 选择器：更改事件不起作用

Populating a Bootstrap select picker dynamically: change event doesn't work

javascript

jquery

twitter-bootstrap-3