val () не викликає зміни () у jQuery

Я намагаюся викликати changeподію у текстовому полі, коли змінюю її значення кнопкою, але це не працює. Перевірте цю загадку .

Якщо ви вводите щось у текстових полях і натискаєте десь ще, changeспрацьовує. Однак, якщо натиснути кнопку, значення текстового поля буде змінено, але changeне спрацьовує. Чому?

onchange спрацьовує лише тоді, коли користувач набирає вхід, а потім вхід втрачає фокус.

Ви можете вручну викликати onchangeподію за допомогою після встановлення значення:

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

Можна також запустити подію, використовуючи:

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

З чудової пропозиції червоного колеса це чудово працює:

$.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')лише у тому випадку, якщо воно зміниться.

Станом на feb 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());
});