Wie kann man den Text einer Schaltfläche in jQuery ändern?

Question

Wie ändert man den Textwert einer Schaltfläche in jQuery? Derzeit hat meine Schaltfläche "Hinzufügen" als Textwert, und wenn sie angeklickt wird, möchte ich, dass sie in "Speichern" geändert wird. Ich habe diese Methode unten versucht, aber bisher ohne Erfolg:

$("#btnAddProfile").attr('value', 'Save');

Answer 1

Hängt davon ab, welche Art von Taste Sie verwenden

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->

<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

Ihre Schaltfläche könnte auch ein Link sein. Für eine genauere Antwort müssen Sie etwas HTML posten.

EDIT : Diese werden funktionieren, wenn Sie sie in eine .click() Anruf, natürlich

EDIT 2 : Neuere jQuery-Versionen (ab > 1.6) verwenden .prop statt .attr

EDIT 3 : Wenn Sie jQuery UI verwenden, müssen Sie die Methode von DaveUK verwenden ( unter ) der Anpassung der Texteigenschaft

Answer 2

Für Schaltflächen, die mit .Button() in jQuery........ erstellt wurden

Während die anderen Antworten den Text ändern, bringen sie das Styling der Schaltfläche durcheinander. Es stellt sich heraus, dass beim Rendern einer jQuery-Schaltfläche der Text der Schaltfläche in einer Spanne verschachtelt ist, z. B.

<button id="thebutton">
  <span class="ui-button-text">My Text</span>
</button>

Wenn Sie den Bereich entfernen und durch Text ersetzen (wie in den anderen Beispielen), gehen der Bereich und die zugehörige Formatierung verloren.

Sie müssen also den Text innerhalb des SPAN-Tags ändern und NICHT den BUTTON!

$("#thebutton span").text("My NEW Text");

oder (wenn es, wie bei mir, bei einem Klick-Ereignis gemacht wird)

$("span", this).text("My NEW Text");

Answer 3

Der korrekte Weg, den Text der Schaltfläche zu ändern, wenn sie mit JQuery "geknöpft" wurde, ist die Verwendung der Methode .button():

$( ".selector" ).button( "option", "label", "new text" );

Answer 4

Um den Text einer Schaltfläche zu ändern, führen Sie einfach die folgende Zeile von jQuery aus für

<input type='button' value='XYZ' id='btnAddProfile'>

verwenden.

$("#btnAddProfile").val('Save');

während für

<button id='btnAddProfile'>XYZ</button>

dies verwenden

$("#btnAddProfile").html('Save');

Answer 5

Utilice .val()

Hier ist ein Link zu JSfiddle