val () löst in jQuery keine change () aus

Ich versuche, das changeEreignis in einem Textfeld auszulösen, wenn ich seinen Wert mit einer Schaltfläche ändere, aber es funktioniert nicht. Überprüfen Sie diese Geige .

Wenn Sie etwas in die Textfelder eingeben und auf eine andere Stelle klicken, changewird dies ausgelöst. Wenn Sie jedoch auf die Schaltfläche klicken, wird der Textfeldwert geändert, jedoch changenicht ausgelöst. Warum?

onchange Wird nur ausgelöst, wenn der Benutzer die Eingabe eingibt und die Eingabe dann den Fokus verliert.

Sie können das onchangeEreignis manuell aufrufen , indem Sie nach dem Festlegen des Werts Folgendes verwenden:

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

Alternativ können Sie das Ereignis auslösen , indem Sie:

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

Nach dem hervorragenden Vorschlag von redsquare funktioniert dies gut:

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

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

Sie können die valFunktion zum Auslösen von Änderungen sehr einfach überschreiben, indem Sie sie durch einen Proxy zum Original ersetzenval Funktion .

Fügen Sie diesen Code einfach irgendwo in Ihr Dokument ein (nach dem Laden von 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);

Ein funktionierendes Beispiel: hier

(Beachten Sie, dass dies immer ausgelöst wird, changewennval(new_val) es aufgerufen wird, auch wenn sich der Wert nicht tatsächlich geändert hat.)

Wenn Sie eine Änderung NUR dann auslösen möchten, wenn sich der Wert tatsächlich geändert hat, verwenden Sie diesen:

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

Live-Beispiel dafür: http://jsfiddle.net/5fSmx/1/

Sie müssen die Methode wie folgt verketten:

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

Nein, Sie müssen es möglicherweise manuell auslösen, nachdem Sie den Wert eingestellt haben:

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

oder:

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

Es sieht so aus, als ob die Ereignisse nicht sprudeln. Versuche dies:

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

Ich hoffe das hilft.

Ich habe nur ein einfaches altes versucht, $("#mytext").trigger('change')ohne den alten Wert zu speichern, und die .changeBrände, auch wenn sich der Wert nicht geändert hat. Deshalb habe ich den vorherigen Wert gespeichert und $("#mytext").trigger('change')nur aufgerufen , wenn er sich ändert.

Ab Februar 2019 .addEventListener()funktioniert derzeit nicht mit jQuery .trigger()oder .change()Sie können es unten mit Chrome oder Firefox testen.

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

Sie müssen .dispatchEvent()stattdessen verwenden.

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

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

Das changeEreignis wird an ein Element gesendet, wenn sich sein Wert ändert. Diese Veranstaltung ist auf <input>Elemente, <textarea>Felder und <select>Elemente beschränkt. Bei Auswahlfeldern, Kontrollkästchen und Optionsfeldern wird das Ereignis sofort ausgelöst, wenn der Benutzer eine Auswahl mit der Maus trifft. Bei den anderen Elementtypen wird das Ereignis jedoch verschoben, bis das Element den Fokus verliert.

Ich weiß, dass dies ein alter Thread ist, aber für andere, die suchen, sind die oben genannten Lösungen möglicherweise nicht so gut wie die folgenden, anstatt changeEreignisse zu überprüfen, überprüfen Sie die inputEreignisse.

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