为什么当我使用 val() 设置 select 的值时 jquery change 事件没有触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4672505/
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
Why does the jquery change event not trigger when I set the value of a select using val()?
提问by Eric Belair
The logic in the change()event handler is not being run when the value is set by val(), but it does run when user selects a value with their mouse. Why is this?
change()当值由 设置时，事件处理程序中的逻辑val()不会运行，但当用户用鼠标选择一个值时，它会运行。为什么是这样？
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<script>
$(function() {
$(":input#single").change(function() {
/* Logic here does not execute when val() is used */
});
});
$("#single").val("Single2");
</script>
回答by user113716
Because the changeevent requires an actual browser event initiated by the user instead of via javascript code.
因为该change事件需要由用户而不是通过 javascript 代码发起的实际浏览器事件。
Do this instead:
改为这样做：
$("#single").val("Single2").trigger('change');
or
或者
$("#single").val("Single2").change();
回答by David says reinstate Monica
回答by Eric Belair
Adding this piece of code after the val() seems to work:
在 val() 之后添加这段代码似乎有效：
$(":input#single").trigger('change');
回答by Marnix
As far as I can read in API's. The event is only fired when the user clicks on an option.
据我所知，API。该事件仅在用户单击选项时触发。
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到该元素失去焦点时。
回答by Alireza Fattahi
To make it easier add a custom function and call it when ever you want that changing the value also trigger change
为了更轻松地添加自定义函数并在您希望更改值也会触发更改时调用它
$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}
and
和
$("#sample").valAndTirgger("NewValue");
Or you can override the val function to always call the change when the val is called
或者您可以覆盖 val 函数以在调用 val 时始终调用更改
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
this.trigger("change");
return originalVal.call(this, value);
};
})(jQuery);
Sample at http://jsfiddle.net/r60bfkub/
回答by user2075039
I ran into the same issue while using CMB2 with Wordpress and wanted to hook into the change event of a file upload metabox.
我在将 CMB2 与 Wordpress 一起使用时遇到了同样的问题，并希望挂钩文件上传元框的更改事件。
So in case you're not able to modify the code that invokes the change (in this case the CMB2 script), use the code below. The trigger is being invoked AFTER the value is set, otherwise your change eventHandler will work, but the value will be the previous one, not the one being set.
因此，如果您无法修改调用更改的代码（在本例中为 CMB2 脚本），请使用以下代码。在设置值后调用触发器，否则您的更改 eventHandler 将起作用，但值将是前一个，而不是正在设置的值。
Here's the code i use:
这是我使用的代码：
(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
if (arguments.length >= 1) {
// setter invoked, do processing
return originalVal.call(this, value).trigger('change');
}
//getter invoked do processing
return originalVal.call(this);
};
})(jQuery);
回答by codingrhythm
In case you don't want to mix up with default change event you can provide your custom event
如果您不想与默认更改事件混淆，您可以提供自定义事件
$('input.test').on('value_changed', function(e){
console.log('value changed to '+$(this).val());
});
to trigger the event on value set, you can do
要在值集上触发事件，您可以执行
$('input.test').val('I am a new value').trigger('value_changed');
回答by Dave Hilditch
If you've just added the select option to a form and you wish to trigger the change event, I've found a setTimeout is required otherwise jQuery doesn't pick up the newly added select box:
如果您刚刚向表单添加了选择选项并且希望触发更改事件，我发现需要 setTimeout 否则 jQuery 不会选择新添加的选择框：
window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);
回答by Prashant Patil
$(":input#single").trigger('change');
This worked for my script. I have 3 combos & bind with chainSelect event, I need to pass 3 values by url & default select all drop down. I used this
这适用于我的脚本。我有 3 个组合并与 chainSelect 事件绑定，我需要通过 url 传递 3 个值并默认选择所有下拉列表。我用过这个
$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');
And the first event worked.
第一个事件奏效了。
