Логика в обработчике событий 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>
Поскольку для события change
требуется фактическое событие браузера, инициированное пользователем, а не через код javascript.
Сделайте это вместо этого:
$("#single").val("Single2").trigger('change');
или
$("#single").val("Single2").change();
Я считаю, что вы можете вручную запустить событие изменения с помощью trigger()
:
$("#single").val("Single2").trigger('change');
Хотя это не срабатывает автоматически, я понятия не имею.
$('#foo').change(function() { $( this ).val( 'whatever' ); });
Насколько я могу читать в API. Событие запускается только тогда, когда пользователь нажимает на параметр.
Для выбора полей, флажков и радиокнопками, событие будет запущено сразу же, когда пользователь делает выбор с помощью мыши, но для другие типы элементов, событие откладывается до тех пор, пока элемент не теряет фокус.
input
, а не когда элемент теряет фокус. Вы знаете?
Добавление этой части кода после работы val():
$(":input#single").trigger('change');
$(":input#single")
. На самом деле вы действительно не должны. Просто цепочка после .val()
. Вы можете использовать .trigger('change')
или .change()
. Они точно такие же.
Чтобы упростить добавление пользовательской функции и вызвать ее, когда вы хотите, чтобы изменение значения также вызывало изменение
$.fn.valAndTrigger = function (element) {
return $(this).val(element).trigger('change');
}
и
$("#sample").valAndTirgger("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/
change
элемента управления и выполняете обратный вызов, который (прямо или косвенно) снова запускает событие- change
для того же элемента управления. Я предлагаю вам использовать другое название для события, вы вызываете вручную (например , explicit.change
), так что он не повторно курок change
-Event, предотвращает петлю, и по- прежнему позволяет реагировать на события.
Если вы не хотите смешивать с событием изменения по умолчанию, вы можете предоставить свое собственное событие
$('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');
Я столкнулся с той же проблемой при использовании CMB2 с Wordpress и хотел подключиться к событию изменения файла uploadox exchange.
Поэтому, если вы не можете изменить код, вызывающий изменение (в данном случае CMB2 script), используйте код ниже. Триггер вызывается ПОСЛЕ того, как значение установлено, в противном случае ваше изменение 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);
$(":input#single").trigger('change');
Это сработало для моего script. У меня есть 3 комбо и связать с событием chainSelect, мне нужно передать 3 значения по URL и по умолчанию выбрать все. Я использовал этот
$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');
И первое событие сработало.
Если вы только что добавили опцию выбора в форму и хотите инициировать событие изменения, я обнаружил, что требуется setTimeout, иначе jQuery не заберет новый добавленный флажок:
window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);