Як змінити текст кнопки в jQuery?


548

Як ви змінюєте текстове значення кнопки в jQuery? На даний момент у моїй кнопці є текстове значення "Додати", і після натискання кнопки я хочу змінити її на "Зберегти". Я спробував цей метод нижче, але поки що без успіху:

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

3
насправді ваш приклад повинен працювати, щоб змінити значення кнопки. Я спробував це, і це спрацювало. Можливо, ідентифікатор кнопки інший або помилка друку.
mjspier

Все ще не працює ... може стилі інтерфейсу JQuery викликають це?
користувач517406

4
Відповідь Сергія була найкращою. вона належним чином працює над кнопками jquery, не знімаючи її стилів, підкладки та поля.
AaA

використовувати цей $ ("# btnAddProfile"). prop ("значення", "Зберегти");
Php developer

Відповіді:


898

Залежить від того, який тип кнопки ви використовуєте

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

Ваша кнопка також може бути посиланням. Вам потрібно буде опублікувати деякі HTML для більш конкретної відповіді.

EDIT : Вони працюватимуть, якщо ви .click(), звичайно, перетворили його на дзвінок

EDIT 2 : Нові версії JQuery (від> 1.6) використання , .propа не.attr

EDIT 3 : Якщо ви використовуєте інтерфейс jQuery, вам потрібно скористатися методом DaveUK ( нижче ) коригування властивості тексту


7
Зробив це за допомогою .html ("Зберегти"), я не помітив, що я встановив runat = сервер на своїй кнопці, саме це спричинило проблему.
користувач517406

Будь-яким способом я можу змусити це працювати, і чи не скорочувати його кнопку jquery ui?
Sevenearths

2
не хвилюйся. Я змінився з buttonна inputі змінив піктограми навколо, замість того, щоб возитися з текстом. (Я припускаю, що щось не передбачалося)
Севеніартс

8
Я б спростував це, якби міг, оскільки це змінює стиль у деяких випадках. Будь ласка, використовуйте відповідь DaveUK, якщо у вас виникли проблеми з цим . PS: Я думаю, що саме це помітили і
Севенеарти

3
Ще краще: використовуйте відповідь Сергія нижче для правильного використання jQuery та підтвердження майбутнім: $ (".selector") .button ("option", "label", "new text");
cincodenada

148

Для кнопок, створених за допомогою .Button () у jQuery ........

У той час як інші відповіді змінять текст, який вони зіпсують стилізацію кнопки, виявляється, що коли кнопка jQuery надається, текст кнопки вкладається в проміжок часу, наприклад

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

Якщо ви вилучите проміжок і заміните його текстом (як в інших прикладах) - ви втратите діапазон і пов'язане з ним форматування.

Отже, вам потрібно змінити текст у тезі SPAN, а НЕ КНОПКИ!

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

або (якщо, як я, це робиться на події клацання)

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

4
Ви не повинні очікувати, що ця структура DOM ніколи не зміниться. Набагато краще використовувати метод jQuery-UI, який дозволяє змінити мітку (див. Відповідь Сергія).
Майк Десімоне

80

Правильний спосіб зміни тексту кнопки, якщо він був "бутонізований" за допомогою JQuery, - це використовувати метод .button ():

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

3
Це працювало для мене краще, ніж інші підходи, які тупотіли на стилізації кнопки (зокрема розмір кнопки). Я використовував кнопку в діалоговому вікні інтерфейсу jQuery, FWIW.
Дейв Кримбахер

8
Це правильна відповідь для кнопок, створених за допомогою jQuery, таких як діалогове вікно. Усі інші знищать частину стилів jQuery. Це також робить це, не залежно від структури HTML, яку створює jQuery, що є більш надійним у майбутньому.
cincodenada

Це правильна відповідь на це питання (схоже, питання стосується кнопок інтерфейсу Jquery, див. Коментарі), його слід рекламувати.
peveuve

38

Щоб змінити текст кнопки, просто виконайте наступний рядок jQuery для

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

використання

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

в той час як для

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

використовуй це

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


Крім того, для кнопок, створених jquery за допомогою, наприклад $('#thing').append($("<button />")....), вам потрібно використовувати .html для встановлення тексту.
Benubird


22

Вам потрібно зробити .button("refresh")

HTML :

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

JS :

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

Чомусь це працює для мене лише після того, як я використав ваш код для оновлення кнопки, але я також помітив, що піктограма на кнопці (частина JQuery Mobile CSS) втрачається після її оновлення (хоча ваше рішення було найближчим Я зрозумів, я отримав).
Ciaran Gallagher

12

Якщо ви натиснули кнопку, то, здається, це працює:

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

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


10

Ви можете використовувати щось подібне:

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

Ви також можете додати додаткові властивості на зразок цієї:

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

Не працює кнопок введення або кнопки надсилання, використовуйте val ()
ActiveX

8

Можна використовувати

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

хоча

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

Так само буде працювати, але це вводить в оману (створюється враження, що ви могли написати щось подібне

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

але, звичайно, не можна



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

10
Повторення непрацюючого коду з питання - це не відповідь.
Benubird

4

це для мене 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

Ви дали клавіші класу замість ідентифікатора? спробуйте наступний код

$(".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');
    }

});

Додайте детальну інформацію про свою відповідь.
Starx

будь-ласка, включіть деталі зі своєю відповіддю У мене немає поняття, що ви тут намагаєтеся зробити.
Анураг

1

Для цього слід зробити фокус:

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


0

це точно правильно, це працює для мене;

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

ви впевнені, що Jquery доступний і що ваш код у правильному місці?



0

Зміна назви етикету кнопок у C #.

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

btnUpdate.**InnerText** = "Update";
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.