Javascript 当通过 JS 更改值时，jQuery 选择不触发 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11165987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Chosen not firing onchange event when value is changed through JS
提问by Fabrício Matté
JSFiddle
JSFiddle
I've set up a selectwith 3 options (1 blank) in the fiddle. When I switch from footo barmanually, the changelistener fires normally.
我在小提琴中设置了select3option秒（1 个空白）。当我手动从 切换foo到 时bar，change侦听器正常触发。
Now if I reset the selectthrough JS with the code posted in some answers here, the changeevent does not fire for the newly selected blank option, furthermore, if I select the option which was selected before clicking in the resetbutton the onchangeevent won't fire either.
现在，如果我select使用此处某些答案中发布的代码重置通过 JS，change则不会为新选择的空白选项触发该事件，此外，如果我选择在单击reset按钮之前选择的选项，该onchange事件也不会触发.
I'm sure the select's value isbeing changed with the function above, which can be seen in this fiddle, but the select's onchangeevent simply doesn't fire.
我确信select's 的值正在被上面的函数改变，这可以在这个fiddle 中看到，但是select'sonchange事件根本不会触发。
I've also tried onchange, onclick, oninputevents to no avail. Right now I'm wondering if I should use a MutationObserver or remove the rendered chosen element from the DOM and create another, but I'm probably overthinking it. Any help is appreciated.
我也试过onchange，onclick，oninput事件无济于事。现在我想知道是否应该使用 MutationObserver 或从 DOM 中删除渲染的选定元素并创建另一个，但我可能想多了。任何帮助表示赞赏。
Also:
还：
This answer helped me a lot: jQuery Chosen reset
这个答案对我帮助很大：jQuery Chosen reset
This answer didn't help: how to fire onchange event in chosen prototype javascript select box?
这个答案没有帮助：如何在选定的原型javascript选择框中触发onchange事件？
Code for future reference if jsfiddle.net is taken down:
如果 jsfiddle.net 被删除，以供将来参考的代码：
HTML
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
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());
});
});
采纳答案by Adam Merrifield
You need to trigger the change after you change the value with $(selector).trigger("change")
您需要在更改值后触发更改 $(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());
});
回答by Tyler
Copying an answer out of the comments by Fabrício Matté that worked for me so others don't see this post and miss a solution at first like I did.
从对我有用的 Fabrício Matté 的评论中复制一个答案，这样其他人就不会看到这篇文章，也不会像我一样一开始就错过了一个解决方案。
$('#chosen_chzn').remove();
$('#chosen').val('').change().removeClass('chzn-done').chosen();
I originally tried to continue using the .trigger('liszt:updated')call instead of the .change()but that did not work. Didn't see the reasoning behind .removeClass('chzn-done')either but this is also essential or your select box will vanish.
我最初尝试继续使用.trigger('liszt:updated')呼叫而不是 ，.change()但这没有用。也没有看到背后的原因.removeClass('chzn-done')，但这也是必不可少的，否则您的选择框将消失。
