jQuery optado por no disparar onchange evento cuando se cambia el valor a través de JS

Question

JSFiddle

He creado un select con 3 option s (1) en blanco en el violín. Cuando cambio manualmente de foo a bar, el oyente change se dispara normalmente.

Ahora bien, si se restablece la select través de JS con el code posted in some answers here, el evento change no se dispara para la opción en blanco que acaba de seleccionar, por otra parte, si selecciono la opción que fue seleccionado antes de hacer clic en el botón reset caso onchange ganó' t fuego tampoco.

Estoy seguro que el select 'valor de s es está cambiando con la función anterior, que se puede ver en este fiddle, pero el select' s onchange caso simplemente no se dispara.

También he intentado onchange, onclick, oninput eventos en vano. En este momento me pregunto si debería usar un MutationObserver o eliminar el elemento elegido renderizado del DOM y crear otro, pero probablemente estoy pensando demasiado. Cualquier ayuda es apreciada.

también:

Esta respuesta me ha ayudado mucho: jQuery Chosen reset

Esta respuesta no ayudó: how to fire onchange event in chosen prototype javascript select box?

Código para referencia futura si jsfiddle.net es bajado:

HTML

<div id="wrapper"> 
    <select id="chosen"> 
     <option value="!!EMPTY VALUE!!"></option> 
     <option value="foo">foo</option> 
     <option value="bar">bar</option> 
    </select> 
</div> 
<br> 
<button id="reset">Reset</button> 

JS

$(function() { 
    $('#chosen').chosen(); 

    $('#wrapper').on('change', '#chosen', function() { 
     console.log('onchange: ' + this.value); 
    }); 

    $('#reset').click(function() { 
     $("#chosen").val('').trigger("liszt:updated"); //doesn't work 
     //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either 
     console.log('reset: ' + $('option:selected').val()); 
    }); 
}); 

Answer 1

Es necesario para desencadenar el cambio después de cambiar el valor con $(selector).trigger("change")

$('#reset').click(function() { 
     $("#chosen").val('').trigger("change"); //doesn't work 
     //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); 
     console.log('reset: ' + $('option:selected').val()); 
    }); 

Answer 2

Copia de una respuesta de los comentarios de Fabricio mate que trabajaban para mí para que otros usuarios Don No veo esta publicación y echo de menos una solución al principio como lo hice.

$('#chosen_chzn').remove(); 
$('#chosen').val('').change().removeClass('chzn-done').chosen(); 

See this on his Fiddle

originalmente intentó continuar utilizando la llamada .trigger('liszt:updated') en lugar de la .change(), pero eso no funcionó. Tampoco vio el razonamiento detrás de .removeClass('chzn-done'), pero esto también es esencial o su cuadro de selección se desvanecerá.