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

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

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

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

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

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

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

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

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

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

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

Вы можете очень легко переопределить 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/

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

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

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

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

или:

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

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

$("#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')только в том случае, если оно изменилось.

По состоянию на февраль 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">

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

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

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

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