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

onchange wird nur ausgelöst, wenn der Benutzer in die Eingabe tippt und die Eingabe dann den Fokus verliert.

Sie können manuell die onchange nach dem Setzen des Wertes:

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

Alternativ können Sie auch Auslöser das Ereignis mit:

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

Answer 2

Nach dem ausgezeichneten Vorschlag von redsquare funktioniert das ganz gut:

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

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

Answer 3

Sie können sehr einfach die val Funktion, um eine Änderung auszulösen, indem sie durch einen Proxy für die ursprüngliche val Funktion.

Fügen Sie einfach diesen Code 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 praktisches Beispiel: aquí

(Beachten Sie, dass dies immer eine change wenn val(new_val) wird auch dann aufgerufen, wenn sich der Wert nicht wirklich geändert hat).

Wenn Sie eine Änderung NUR dann auslösen wollen, wenn sich der Wert tatsächlich geändert hat, verwenden Sie diese Option:

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

Ein lebendes Beispiel dafür: http://jsfiddle.net/5fSmx/1/

Answer 4

Sie müssen die Methode wie folgt verketten:

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

Answer 5

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

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

oder:

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