2010-01-13 18 views
27

Gibt es eine Möglichkeit, die val() Funktion von jQuery einfach zu überschreiben?jQuery .val() Funktion überschreiben?

Der Grund, den ich es überschreiben möchte, ist, dass ich jedes Mal, wenn ein Wert für ein Element festgelegt wird, etwas Verarbeitung hinzufügen möchten. Und ich möchte keinen anderen benutzerdefinierten Wertsetzer wie myVal() machen.

+0

Ich nehme an, dass das Ereignis .change() für Sie hier nicht funktioniert? –

+0

@Mark: Wenn ich den Wert von Elementen durch $ ('# foo') .val ('someValue') setze, wird das .change() Ereignis nicht ausgelöst. Es scheint nur ausgelöst zu werden, wenn der Wert vom Benutzer auf der GUI/Browser geändert wird. – 7wp

+0

$ ('# foo'). Val ('someValue'). Trigger ('change'); könnte nützlich sein, um den Trigger in dort dann zu ketten ... –

Antwort

46

können Sie speichern eine Referenz auf die ursprüngliche val Funktion, es dann außer Kraft setzen und Ihre Verarbeitung tun, und es später aufrufen mit call, den richtigen Kontext zu verwenden:

(function ($) { 
    var originalVal = $.fn.val; 
    $.fn.val = function(value) { 
    if (typeof value != 'undefined') { 
     // setter invoked, do processing 
    } 
    return originalVal.call(this, value); 
    }; 
})(jQuery); 

Beachten Sie, dass zwischen einem unterscheiden kann Getter Anruf $(selector).val(); und ein Setter Anruf $(selector).val('new value'); nur durch Überprüfung, ob das value Argument ist undefined oder nicht.

+0

Vielen Dank, sehr geschätzt. – 7wp

+4

Dies wird nicht funktionieren (zumindest nicht in jQuery 1.7). Die ursprüngliche jQuery-Funktion basiert auf der Anzahl der Argumente, sodass der ursprüngliche val() -Methodenaufruf immer als Setter betrachtet wird. Um dies zu beheben, ersetzen Sie "return originalVal.call (this, value);" mit "return originalVal.apply (this, Argumente);" – dkl

+4

Weder das Original, noch die vorgeschlagene Änderung von @dkl funktioniert mit Chrome. Verwenden Sie eine if..else, um zu testen, ob Sie erhalten oder Einstellungen funktionieren. Es folgt eine transparente Überschreibung, die nach Bedarf geändert werden kann. (function ($) {var OriginalVal = $ .fn.val; $ .fn.val = function (value) { if (typeof Wert == 'undefined') { return originalVal.call (this); } sonst { Rückgabe originalVal.call (dieser Wert); } }; }) (jQuery); – Martijn

1

Wenn ich verstehe Sie richtig, so etwas wie dies sollte gut den Trick:

jQuery.fn.val = function (new_val) { 
    alert("You set a val! How wonderful!"); 
    this.value = new_val; 
}; 

So stellen Sie sicher, dass Sie die reguläre Funktionalität umfassen: getting Werte auswählt und so weiter. Kleben Sie einfach diesen Code nach nach der regulären jQuery-Bibliothek.

+0

Kopieren Sie nicht das ursprüngliche Verhalten, rufen Sie es explizit, um die Abwärtskompatibilität und Kompatibilität mit anderen Überschreibungen der val() - Funktion zu gewährleisten. – Martijn

+0

@Martijn: Wenn ich vor zwei Jahren wüsste, was ich jetzt weiß, hätte ich das getan. Aber leider ist es ein bisschen spät dafür. – Reid

2

Ich weiß, das Problem ist alt, aber nur um eine vollständige Lösung zu geben. Damit jQuery.val() und jQuery.val (value) nach dem Überschreiben funktionieren, müssen Sie sie ordnungsgemäß und separat überschreiben. Weil beim Aufruf von jQuery.val() dann originalVal.call (this, value); wird nicht korrekt funktionieren.

Um es richtig zu tun, müssen Sie etwas tun, wenn Sie den Wert erhalten: originalVal.call (this); Hier

ist ein Ort, an dem alles erklärt: http://extremedev.blogspot.com/2012/01/override-jqueryval-and-jqueryvalvalue.html

Grüße, Roman

+5

Danke Roman Ich wusste das schon, aber du machst hier eine Eigenwerbung für deine Seite. Es wäre sinnvoller, wenn Sie zumindest Ihre vollständige Antwort in den Stack-Überlauf einfügen würden. Auf diese Weise, wenn Ihre Website jemals aus dem Internet verschwindet, wäre Ihre Antwort noch intakt auf dieser Website für die Menschen zu sehen. Das wäre viel hilfreicher Roman. Danke für Ihre Mühe. – 7wp

+1

@ 7wp +1 netter Kommentar. –

+0

Wäre schön, wenn dieser Code auch funktioniert hätte! Wo ist "widgetElementId" definiert, bevor Sie es mit jQuery versuchen und auflösen? –

15

Ich weiß, es ist ein altes Thema, aber es ist erst in der Google-Suche und die Antwort ist nicht ganz richtig ...

Zum Beispiel, wenn Sie versuchen, in der Konsole $('#myinput').val() sollten Sie den Wert von #myinput erhalten.

Aber wenn Sie $('#myinput').val(undefined) tun sollten Sie den Wert von #myinput gesetzt! ( Mit der aktuellen Antwort und die Kommentare von ihm, werden Sie nicht den Wert von #myinput eingestellt)

Hier ist eine verbesserte Antwort, die Verwenden Sie arguments.

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

, wenn Sie die Argumente alle

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

ich helfen können auch sie hoffen gelten passieren!

+0

Große Antwort! Funktioniert perfekt. – Rajesh

0

ich etwas CMS Antwort hinzuzufügen haben, würde meine Implementierung wie diese unterscheiden und sein:

(function ($) { var fnVal = $.fn.val; 
    $.fn.val = function(value) { 
     if (typeof value == 'undefined') { 
      return fnVal.call(this); 
     } 
     var result = fnVal.call(this, value); 
     $.fn.change.call(this); 
     // here you can add some more implementation 
     return result; 
    }; 
})(jQuery); 

die $ .fn.change beobachten.ruf an (dies); wird vor dem Verlassen der val ('') Funktion aufgerufen, dies löst auch die .change() auf jeder val ('') Zuweisung aus.