为什么jquery改变事件不触发时，我设置了一个选择使用val()的值?

当val()设置值时，change()事件处理程序中的逻辑不会运行，但当用户用鼠标选择一个值时，它会运行。为什么会这样?

<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>
266517 次浏览
小开

我相信你可以用trigger()手动触发更改事件:

$("#single").val("Single2").trigger('change');

虽然我不知道为什么它不会自动发射。

小开
最佳答案

因为change事件需要一个实际的浏览器事件，由用户发起，而不是通过javascript代码。

你可以这样做:

$("#single").val("Single2").trigger('change');

或

$("#single").val("Single2").change();
小开

就我所能读到的API。该事件仅在用户单击某个选项时触发。

http://api.jquery.com/change/

对于选择框，复选框和 单选按钮，事件被触发 当用户执行 用鼠标选择，但对于 事件的其他元素类型 延迟，直到元素丢失 焦点。< / p >

小开

在val()之后添加这段代码似乎可以工作:

$(":input#single").trigger('change');
小开 
$(":input#single").trigger('change');

这对我的剧本很管用。我有3个组合&绑定与chainSelect事件，我需要通过url & 3个值;默认选择全部下拉。我用了这个

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

第一个活动成功了。

小开

如果您不想与默认更改事件混淆，您可以提供您的自定义事件

$('input.test').on('value_changed', function(e){
console.log('value changed to '+$(this).val());
});

要在值设置上触发事件，可以执行以下操作

$('input.test').val('I am a new value').trigger('value_changed');
小开

如果你刚刚在表单中添加了选择选项，并且你希望触发更改事件，我发现需要一个setTimeout，否则jQuery不会选择新添加的选择框:

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);
小开

为了更简单，添加一个自定义函数，当你想要更改值时调用它，并触发更改:

$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}

而且

$("#sample").valAndTrigger("NewValue");

或者你可以重写val()函数，以在val()被调用时始终调用更改:

(function ($) {
var originalVal = $.fn.val;
$.fn.val = function (value) {
this.trigger("change");
return originalVal.call(this, value);
};
})(jQuery);

在http://jsfiddle.net/r60bfkub/取样

小开

我在使用cb2和Wordpress时遇到了同样的问题，并且想要钩入文件上传metabox的更改事件。

因此，如果您不能修改调用更改的代码(在本例中是cb2脚本)，请使用下面的代码。 触发器将在值设置之后被调用，否则您的更改eventHandler将工作，但该值将是前一个值，而不是正在设置的值

下面是我使用的代码:

(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);

提交答案