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

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

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

Answer 9

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

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