Warum wird das Ereignis jquery change nicht ausgelöst, wenn ich den Wert einer Auswahl mit val () festlege?

Die Logik im change()Ereignishandler wird nicht ausgeführt, wenn der Wert von festgelegt wird val(), sondern ausgeführt, wenn der Benutzer mit der Maus einen Wert auswählt. Warum ist das?

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>

<script>
    $(function() {
        $(":input#single").change(function() {
           /* Logic here does not execute when val() is used */
        });
    });

    $("#single").val("Single2");
</script>

Weil das changeEreignis ein tatsächliches Benutzerereignis erfordert, das vom Benutzer anstelle von Javascript-Code initiiert wird.

Tun Sie dies stattdessen:

$("#single").val("Single2").trigger('change');

oder

$("#single").val("Single2").change();

Ich glaube, Sie können das Änderungsereignis manuell auslösen mit trigger():

$("#single").val("Single2").trigger('change');

Obwohl es nicht automatisch ausgelöst wird, habe ich keine Ahnung.

Das Hinzufügen dieses Codeteils nach val () scheint zu funktionieren:

$(":input#single").trigger('change');

Soweit ich APIs einlesen kann. Das Ereignis wird nur ausgelöst, wenn der Benutzer auf eine Option klickt.

http://api.jquery.com/change/

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.

Fügen Sie zur Vereinfachung eine benutzerdefinierte Funktion hinzu und rufen Sie sie auf, wann immer Sie möchten, dass eine Änderung des Werts auch eine Änderung auslöst

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

und

$("#sample").valAndTirgger("NewValue");

Oder Sie können die val-Funktion überschreiben, um die Änderung immer aufzurufen, wenn der val aufgerufen wird

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

Beispiel unter http://jsfiddle.net/r60bfkub/

Falls Sie nicht mit dem Standardänderungsereignis verwechseln möchten, können Sie Ihr benutzerdefiniertes Ereignis angeben

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

Sie können Folgendes tun, um das Ereignis bei einem festgelegten Wert auszulösen

$('input.test').val('I am a new value').trigger('value_changed');

Ich bin bei der Verwendung von CMB2 mit Wordpress auf dasselbe Problem gestoßen und wollte mich in das Änderungsereignis einer Metabox zum Hochladen von Dateien einbinden.

Falls Sie den Code, der die Änderung aufruft, nicht ändern können (in diesem Fall das CMB2-Skript), verwenden Sie den folgenden Code. Der Trigger wird aufgerufen, nachdem der Wert festgelegt wurde. Andernfalls funktioniert Ihr Änderungsereignishandler, aber der Wert ist der vorherige und nicht der festgelegte.

Hier ist der Code, den ich benutze:

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        if (arguments.length >= 1) {
            // setter invoked, do processing
            return originalVal.call(this, value).trigger('change');
        }
        //getter invoked do processing
        return originalVal.call(this);
    };
})(jQuery);

$(":input#single").trigger('change');

Dies funktionierte für mein Skript. Ich habe 3 Combos und binde mit dem chainSelect-Ereignis. Ich muss 3 Werte per URL übergeben und standardmäßig alle Dropdown-Listen auswählen. Ich habe das benutzt

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

Und die erste Veranstaltung hat funktioniert.

Wenn Sie gerade die Auswahloption zu einem Formular hinzugefügt haben und das Änderungsereignis auslösen möchten, ist ein setTimeout erforderlich, andernfalls greift jQuery das neu hinzugefügte Auswahlfeld nicht auf:

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);