val() non fa scattare il cambiamento() in jQuery

Question

Sto cercando di attivare l'evento change su una casella di testo quando cambio il suo valore con un pulsante, ma non funziona. Controllare this fiddle.

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

Answer 1

onchange solo viene generato quando l'utente immessi nell'input e quindi l'ingresso perde il focus.

È possibile chiamare manualmente l'evento onchange utilizzando dopo aver impostato il valore:

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

In alternativa, è possibile trigger l'evento utilizzando:

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

Answer 2

Non potrebbe essere necessario attivare manualmente dopo l'impostazione il valore:

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

oppure:

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

Answer 3

Sembra che gli eventi non siano gorgoglianti. 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 questo aiuti.

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

Answer 4

Da eccellente suggerimento di redsquare, questo funziona bene:

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

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

Answer 5

È possibile sostituire facilmente la funzione val per innescare il cambiamento sostituendolo con un proxy per la funzione originaria val.

basta aggiungere questo codice da qualche parte nel 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 di lavoro: here

(Si noti che questo sarà sempre innescherà change quando val(new_val) viene chiamato anche se il valore didn 't in realtà cambiato.)

Se si desidera attivare la modifica SOLO quando il valore 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 vivo per questo: http://jsfiddle.net/5fSmx/1/

Answer 6

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

L'evento change viene inviato ad un elemento quando il suo valore cambia.Questo evento è limitato agli elementi <input>, alle caselle <textarea> e agli elementi <select>. Per le caselle di selezione, le caselle di controllo e i pulsanti di opzione, l'evento viene attivato immediatamente quando l'utente effettua una selezione con il mouse, ma per gli altri tipi di elemento l'evento viene posticipato fino a quando l'elemento non si concentra.

Answer 7

È necessario catena del metodo come questo: [? Textbox.val jQuery ('xxxx') senza causare cambiamenti al fuoco]

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