val () non attiva change () in jQuery

Sto cercando di attivare l' changeevento su una casella di testo quando cambio il suo valore con un pulsante, ma non funziona. Controlla questo violino .

Se si digita qualcosa nelle caselle di testo e si fa clic da qualche altra parte, changeviene attivato. Tuttavia, se si fa clic sul pulsante, il valore della casella di testo viene modificato, ma changenon si attiva. Perché?

onchange si attiva solo quando l'utente digita nell'input e quindi l'input perde lo stato attivo.

Puoi chiamare manualmente l' onchangeevento usando dopo aver impostato il valore:

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

In alternativa, puoi attivare l'evento usando:

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

Dall'eccellente suggerimento di redsquare, funziona perfettamente:

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

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

Puoi facilmente sostituire la valfunzione per attivare la modifica sostituendola con un proxy alla valfunzione originale .

aggiungi questo codice da qualche parte nel tuo documento (dopo aver caricato 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);

Un esempio funzionante: qui

(Si noti che questo si attiverà sempre changequando val(new_val)viene chiamato anche se il valore non è stato effettivamente modificato.)

Se si desidera attivare la modifica SOLO quando il valore è stato effettivamente modificato, utilizzare questo:

//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);

Esempio live per quello: http://jsfiddle.net/5fSmx/1/

Devi concatenare il metodo in questo modo:

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

No, potrebbe essere necessario attivarlo manualmente dopo aver impostato il valore:

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

o:

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

Sembra che gli eventi non stiano ribollendo. Prova questo:

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

Spero che aiuti.

Ho provato solo un vecchio $("#mytext").trigger('change')senza salvare il vecchio valore, e gli .changeincendi anche se il valore non è cambiato. Ecco perché ho salvato il valore precedente e chiamato $("#mytext").trigger('change')solo se cambia.

A partire da febbraio 2019 .addEventListener()non funziona attualmente con jQuery .trigger()o .change(), puoi testarlo di seguito utilizzando Chrome o 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">

devi usare .dispatchEvent()invece.

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">

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

L' changeevento viene inviato a un elemento quando il suo valore cambia. Questo evento è limitato a <input>elementi, <textarea>caselle ed <select>elementi. Per le caselle selezionate, le caselle di controllo e i pulsanti di opzione, l'evento viene generato immediatamente quando l'utente effettua una selezione con il mouse, ma per gli altri tipi di elemento l'evento viene rinviato fino a quando l'elemento non si attiva.

So che questo è un vecchio thread, ma per gli altri che cercano, le soluzioni di cui sopra forse non sono buone come le seguenti, invece di controllare gli changeeventi, controllare gli inputeventi.

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