当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>
为了更简单,添加一个自定义函数,当你想要更改值时调用它,并触发更改:
$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}
and
$("#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);