Как изменить текст кнопки в jQuery?


548

Как вы измените текстовое значение кнопки в jQuery? В настоящее время моя кнопка имеет «Добавить» в качестве текстового значения, и после нажатия я хочу, чтобы она изменилась на «Сохранить». Я попробовал этот метод ниже, но пока безуспешно:

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

3
на самом деле ваш пример должен работать, чтобы изменить значение кнопки. Я попробовал, и это сработало. Может быть, идентификатор кнопки отличается или опечатка.
mjspier

Все еще не работает ... могут ли стили JQuery UI вызывать это?
user517406

4
Ответ Сергея был лучшим. он работает правильно на кнопках jquery, не удаляя его стили, отступы и поля.
AaA

используйте этот $ ("# btnAddProfile"). prop ('value', 'Save');
Php разработчик

Ответы:


899

Зависит от того, какой тип кнопки вы используете

<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 для более конкретного ответа.

РЕДАКТИРОВАТЬ : они будут работать, если вы .click(), конечно, завернули его в вызов

РЕДАКТИРОВАТЬ 2 : использование более новых версий jQuery (от> 1.6).prop а не.attr

РЕДАКТИРОВАТЬ 3 : Если вы используете JQuery UI, вам нужно использовать метод DaveUK ( ниже ) для настройки свойства текста


7
Работал с использованием .html («Сохранить»), я не заметил, что на моей кнопке установлен runat = server, именно это и стало причиной проблемы.
user517406

В любом случае, я могу заставить это работать, и это не сжимает мою кнопку jquery ui?
Семь Земель

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

8
Я бы понизил это, если бы мог, поскольку в некоторых случаях это портит стиль. Пожалуйста, используйте ответ DaveUK, если у вас есть проблемы с этим . PS: Я думаю, это то, что заметили и
Sevenearths

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

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, что в большей степени ориентировано на будущее.
Синкоденада

Это правильный ответ на этот вопрос (кажется, вопрос касается кнопок пользовательского интерфейса Jquery, см. Комментарии), его следует продвигать.
Певе

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) теряется после ее обновления (хотя ваше решение было самым близким Я получил).
Кьяран Галлахер

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

Пожалуйста, включите детали в ваш ответ. Я понятия не имею, что вы пытаетесь сделать здесь.
Anurag



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.