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


Die Logik in der Ereignisbehandlungsroutine change() wird nicht ausgeführt, wenn der Wert von val() wird. Sie wird jedoch ausgeführt, wenn der Benutzer einen Wert mit der Maus 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>


Answers



Da das change ein tatsächliches Browserereignis erfordert, das vom Benutzer anstatt über JavaScript-Code initiiert wird.

Tun Sie das stattdessen:

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



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

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

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




Soweit ich in APIs lesen 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.




Das Hinzufügen dieses Code-Teils nach val () scheint zu funktionieren:

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



Um es einfacher zu machen, fügen Sie eine benutzerdefinierte Funktion hinzu und rufen sie auf, wann immer Sie möchten.

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

und

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

Oder Sie können die Funktion val außer Kraft setzen, um die Änderung immer dann aufzurufen, wenn das 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 verwechselt werden möchten, können Sie Ihr benutzerdefiniertes Ereignis bereitstellen.

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

Um das Ereignis auf dem Wertsatz auszulösen, können Sie

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



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

Das funktionierte für mein Skript. Ich habe 3 combos & bind mit chainSelect Event, ich muss 3 Werte per URL übergeben & default alle Dropdown auswählen. Ich habe das benutzt

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

Und das erste Ereignis hat funktioniert.




Ich bin auf das gleiche Problem gestoßen, als ich CMB2 mit Wordpress verwendet habe und wollte mich in das Änderungsereignis einer Datei-Upload-Metabox einklinken.

Falls Sie nicht in der Lage sind, den Code zu ändern, der die Änderung auslöst (in diesem Fall das CMB2-Skript), verwenden Sie den folgenden Code. Der Trigger wird aufgerufen, nachdem der Wert gesetzt wurde. Andernfalls funktioniert der change eventHandler, aber der Wert ist der vorherige und nicht der gesetzte.

Hier ist der Code, den ich verwende:

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



Wenn Sie gerade die select-Option zu einem Formular hinzugefügt haben und das Änderungsereignis auslösen möchten, haben Sie festgestellt, dass setTimeout erforderlich ist, da jQuery das neu hinzugefügte Auswahlfeld nicht aufnimmt:

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