val() не вызывает change() в jQuery

Question

Я пытаюсь вызвать change событие в текстовом поле, когда я изменяю его значение с помощью кнопки, но это не работает. Проверьте эту скрипку.

Если вы введете что-то в текстовые поля и щелкните где-нибудь еще, change срабатывает. Однако, если вы нажмете кнопку, значение текстового поля будет изменено, но change не срабатывает Зачем?

Answer 1

onchange срабатывает только тогда, когда пользователь вводит данные, а затем ввод теряет фокус.

Вы можете вручную позвонить onchange Использование события после установки значения:

$("#mytext").change(); // someObject.onchange(); in standard JS

Кроме того, вы можете вызвать событие, используя:

$("#mytext").trigger("change");

Answer 2

Из превосходного предложения redsquare, это работает хорошо:

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

Answer 3

Вы можете очень легко переопределить val функция для запуска изменения, заменив его прокси-сервером к оригиналу val функция.

просто добавьте этот код где-нибудь в вашем документе (после загрузки jQuery)

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

Рабочий пример: здесь

(Обратите внимание, что это всегда будет вызывать change когда val(new_val) вызывается, даже если значение на самом деле не изменилось.)

Если вы хотите инициировать изменение ТОЛЬКО, когда значение действительно изменилось, используйте это:

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

Живой пример для этого: http://jsfiddle.net/5fSmx/1/

Answer 4

Вам нужно связать метод следующим образом:

$('#input').val('test').change();

Answer 5

Нет, вам может понадобиться запустить его вручную после установки значения:

$('#mytext').change();

или же:

$('#mytext').trigger('change');

Answer 6

Похоже, события не кипят. Попробуй это:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

Надеюсь, это поможет.

Я попробовал просто старый $("#mytext").trigger('change') без сохранения старого значения, а .change срабатывает, даже если значение не изменилось. Вот почему я сохранил предыдущее значение и назвал $("#mytext").trigger('change') только если это изменится.

Answer 7

По состоянию на февраль 2019 г. .addEventListener() В настоящее время не работает с JQuery .trigger() или же .change() Вы можете проверить это ниже, используя Chrome или Firefox.

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

ты должен использовать .dispatchEvent() вместо.

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">

Answer 8

Я знаю, что это старый поток, но для других, которые ищут, приведенные выше решения, возможно, не так хороши, как следующие, вместо проверки change события, проверьте input События.

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});

Answer 9

В некоторых случаях, как это произошло со мной, когда у вас есть пользовательская проверка ввода, которая прослушивает обновления/изменения ввода,.change()или.trigger('change')хочу помощи.

В таких случаях для входных данных можно попробовать использовать следующее:

      .trigger('input')

Answer 10

вы можете использовать метод attr и val , а затем инициировать изменение:

      $('.parent-form').find('input').each(function() {
    item = $(this);
    item.attr('value', '0622-03-22');
    item.val('01/01/01').trigger('change');
});

Answer 11

С https://api.jquery.com/change/:

change Событие отправляется элементу при изменении его значения. Это событие ограничено <input> элементы, <textarea> коробки и <select> элементы. Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.

Answer 12

Ответы здесь хорошие, но ни один из них не помог мне в 2023 году при использовании jQuery 3.7.1 в современных браузерах. Что сработало для меня, так это:

      $('#something').val('some value').trigger('keyup');

Я не знаю, что случилось сchangeтриггер, но установка триггера наkeyupв настоящее время у меня работает нормально.