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

Question

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

这里是我的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> 

正如你可以看到，下拉被正确填充，但是当我选择一个选项，“改变“事件似乎没有被触发。我已阅读关于事件委派的内容，但正如您所看到的，事件处理程序附加到body。利用事件冒泡。

我还缺少什么？我有怀疑，它必须是东西真的很傻...

Answer 1

更改此：

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

要这样：

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

调用不存在的刷新（）方法来防止剩余代码被执行。

更正提琴：http://jsfiddle.net/BenjaminRay/83k458Lz/11/