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

Question

Ich versuche, die change Ereignis auf ein Textfeld, wenn ich seinen Wert mit einer Schaltfläche ändern, aber es funktioniert nicht. Prüfen Sie diese Fiedel .

Wenn Sie etwas in die Textfelder eingeben und woanders klicken, change ausgelöst wird. Wenn Sie jedoch auf die Schaltfläche klicken, wird der Wert des Textfeldes geändert, aber change nicht auslöst. Warum?

Answer 1

Es sieht so aus, als würden die Ereignisse nicht sprudeln. Versuchen Sie 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 ein einfaches altes $("#mytext").trigger('change') ohne den alten Wert zu speichern, und die .change auslöst, auch wenn sich der Wert nicht geändert hat. Aus diesem Grund habe ich den vorherigen Wert gespeichert und die $("#mytext").trigger('change') nur wenn sie sich ändert.

Answer 2

Stand: Februar 2019 .addEventListener() funktioniert derzeit nicht mit jQuery .trigger() o .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">

müssen Sie .dispatchEvent() stattdessen.

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

Answer 3

Ich weiß, dies ist ein altes Thema, aber für andere, die auf der Suche sind, sind die oben genannten Lösungen vielleicht nicht so gut wie die folgenden, anstatt zu prüfen change Ereignisse, prüfen Sie die input Veranstaltungen.

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

Answer 4

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

En change Ereignis wird an ein Element gesendet, wenn sich sein Wert ändert. Dieses Ereignis ist begrenzt auf <input> Elemente, <textarea> Boxen und <select> Elemente. Bei Auswahlfeldern, Kontrollkästchen und Optionsfeldern wird das Ereignis sofort ausgelöst, wenn der Benutzer mit der Maus eine Auswahl trifft, aber bei den anderen Elementtypen wird das Ereignis verschoben, bis das Element den Fokus verliert.