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


Answers

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

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

Obwohl es nicht automatisch feuert, habe ich keine Ahnung.

Question

Die Logik im Ereignishandler change() wird nicht ausgeführt, wenn der Wert mit val() wurde. 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>



Wenn Sie nicht mit dem Standardänderungsereignis verwechseln 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 Wert gesetzt auszulösen, können Sie tun

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



Ich stieß auf das gleiche Problem bei der Verwendung von CMB2 mit Wordpress und wollte in das Änderungsereignis eines Datei-Upload-Metabox einhaken.

Wenn 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 wird der Change eventHandler funktionieren, aber der Wert wird der vorherige sein, nicht der, der gesetzt wird.

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



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

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