Jak zmienić tekst przycisku w jQuery?


547

Jak zmienić wartość tekstową przycisku w jQuery? Obecnie mój przycisk ma „Dodaj” jako wartość tekstową, a po kliknięciu chcę zmienić na „Zapisz”. Próbowałem tej metody poniżej, ale jak dotąd bez powodzenia:

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

3
tak naprawdę twój przykład powinien działać, aby zmienić wartość przycisku. Próbowałem i zadziałało. Może identyfikator przycisku jest inny lub literówka.
mjspier,

Nadal nie działa ... Czy może to powodować style interfejsu użytkownika JQuery?
user517406

4
Odpowiedź Siergieja była najlepsza. działa poprawnie na przyciskach jquery bez usuwania stylów, dopełnienia i marginesów.
AaA

użyj tego $ („# btnAddProfile”). prop („wartość”, „Zapisz”);
Deweloper php

Odpowiedzi:


897

Zależy od typu używanego przycisku

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

Twój przycisk może być również linkiem. Musisz opublikować trochę HTML, aby uzyskać bardziej szczegółową odpowiedź.

EDYCJA : Będą działać, zakładając .click()oczywiście , że zawarłeś je w rozmowie

EDYCJA 2 : Nowsze wersje jQuery (od> 1.6) używają .propzamiast.attr

EDYCJA 3 : Jeśli używasz jQuery UI, musisz użyć metody DaveUK ( poniżej ) do dostosowania właściwości text


7
Mam działający przy użyciu .html („Zapisz”), nie zauważyłem, że ustawiłem runat = server na moim przycisku, to właśnie powodowało problem.
user517406

W jakikolwiek sposób mogę sprawić, że to zadziała i żeby nie zawijało mojego przycisku interfejsu użytkownika jquery?
Sevenearths

2
nie martw się o to. Zmieniłem z buttonna inputi zmieniłem okrągłe ikony zamiast zadzierać z tekstem. (Przypuszczam, że coś nie miało być)
Sevenearths

8
Głosowałbym za tym, gdybym mógł, ponieważ w niektórych przypadkach zaburza to styl. Proszę skorzystać z odpowiedzi DaveUK, jeśli masz z tym problem . PS: Wydaje mi się, że właśnie to zauważył
Sevenearths

3
Jeszcze lepiej: użyj poniższej odpowiedzi Siergieja, aby właściwie użyć jQuery i zabezpieczenia na przyszłość: $ („.selector”). Przycisk („opcja”, „etykieta”, „nowy tekst”);
cincodenada

148

Dla przycisków utworzonych za pomocą .Button () w jQuery ........

Podczas gdy inne odpowiedzi zmienią tekst, zepsują styl przycisku, okazuje się, że gdy renderowany jest przycisk jQuery, tekst przycisku jest zagnieżdżany w zakresie np.

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

Jeśli usuniesz zakres i zastąpisz go tekstem (jak w innych przykładach) - stracisz zakres i związane z nim formatowanie.

Musisz zmienić tekst w znaczniku SPAN, a NIE PRZYCISK!

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

lub (jeśli tak jak ja, odbywa się to na zdarzeniu kliknięcia)

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

4
Nie należy oczekiwać, że ta struktura DOM nigdy się nie zmieni. Zdecydowanie lepiej jest użyć metody jQuery-UI, która pozwala zmienić etykietę (patrz odpowiedź Siergieja).
Mike DeSimone

80

Prawidłowym sposobem zmiany tekstu przycisku, jeśli został on „przyporządkowany” za pomocą JQuery, jest użycie metody .button ():

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

3
To działało dla mnie lepiej niż inne podejścia, które naciskały na styl guzika (w szczególności rozmiar guzika). Użyłem przycisku w oknie dialogowym interfejsu użytkownika jQuery, FWIW.
Dave Crumbacher,

8
To jest poprawna odpowiedź dla przycisków utworzonych za pomocą jQuery, takich jak te w oknie dialogowym. Wszystkie pozostałe zniszczą część stylu jQuery. Robi to również bez zależności od struktury HTML generowanej przez jQuery, co jest bardziej przyszłościowe.
cincodenada

To jest prawidłowa odpowiedź na to pytanie (wydaje się, że pytanie dotyczy przycisków interfejsu użytkownika Jquery, patrz komentarze), należy je promować.
peveuve

38

Aby zmienić tekst przycisku, wystarczy wykonać następujący wiersz jQuery dla

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

posługiwać się

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

podczas gdy dla

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

Użyj tego

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


Ponadto w przypadku przycisków utworzonych za pomocą jquery przy użyciu np. $('#thing').append($("<button />")....)Musisz ustawić plik .html.
Benubird


22

Musisz zrobić .button("refresh")

HTML :

<button id='btnviewdetails' type='button'>SET</button>

JS :

$('#btnviewdetails').text('Save').button("refresh");

Z jakiegoś powodu zadziałałoby to tylko po tym, jak użyłem twojego kodu do odświeżenia przycisku, ale zauważyłem również, że ikona na przycisku (część JQuery Mobile CSS) gubi się po odświeżeniu (chociaż twoje rozwiązanie było najbliżej Mam).
Ciaran Gallagher

12

Jeśli przycisk został przypięty do przycisku, wydaje się, że działa:

<button id="button">First caption</button>

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);


10

Możesz użyć czegoś takiego:

$('#your-button').text('New Value');

Możesz także dodać dodatkowe właściwości, takie jak to:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');

Nie działa z przyciskami wejściowymi ani przyciskami przesyłania, użyj val ()
ActiveX

8

Możesz użyć

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

mimo że

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

też by działał, ale wprowadza w błąd (daje wrażenie, że można napisać coś takiego

$("#btnAddProfile").html('Save <b>now</b>');

ale oczywiście nie możesz



5
$("#btnAddProfile").click(function(){
    $("#btnAddProfile").attr('value', 'Save');
 });

10
Powtórzenie niedziałającego kodu z pytania nie jest odpowiedzią.
Benubird

4

to działa dla mnie html:

<button type="button" class="btn btn-primary" id="btnSaveSchedule">abc</button>

js

$("#btnSaveSchedule").text("new value");

4

$(document).ready(function(){
    $(":button").click(function(){
        $("p").toggle();

    if (this.value=="Add") this.value = "Save";
    else this.value = "Add";

  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

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

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>


2

Czy dałeś swojemu guzikowi klasę zamiast identyfikatora? wypróbuj następujący kod

$(".btnSave").attr('value', 'Save');

1
$("#btnviewdetails").click(function(){
    if($(this).val()!="hide details"){
        $("#detailedoutput").show();
        $(this).val('hide details');
    }else{
        $("#detailedoutput").hide();
        $(this).val('view more details');
    }

});

Podaj kilka szczegółów swojej odpowiedzi.
Starx,

w odpowiedzi podaj szczegóły. Nie mam pojęcia, co próbujesz tutaj zrobić.
Anurag

1

To powinno załatwić sprawę:

$("#btnAddProfile").prop('value', 'Save');       
$("#btnAddProfile").button('refresh');


0

to jest dokładnie poprawne, to działa dla mnie;

    $('#btnAddProfile').bind('click',function(){
    $(this).attr('value','save');
})

czy jesteś pewien, że Jquery jest dostępna i czy Twój kod znajduje się we właściwym miejscu?



0

Zmiana nazwy etykiety przycisku w C #.

<button type="submit" name="add" id="btnUpdate" class="btn btn-primary" runat="server" onserverclick="btnUpdate_Click">
Add

btnUpdate.**InnerText** = "Update";
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.