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

Question

У меня есть кнопка, которую я использую с jQueryUI, что-то вроде этого (упрощенно).

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

Этот код нарушает внешний вид кнопки, потому что при добавлении в виджет кнопки внутри кнопки добавляется новый диапазон. Поэтому я сейчас меняю значение кнопки

$(this).find('span').text('Stop');

Это хакерство, потому что я больше не могу воспринимать кнопку как черный ящик и должен зайти внутрь.

Есть ли чистый способ сделать это?

Answer 1

Может быть, вы могли бы вместо этого использовать опцию label кнопки jQuery UI?

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbin Предварительный просмотр здесь

Answer 2

Вы можете использовать метод .button ("refresh") после изменения текста.

$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop').button("refresh");
    },
    function(){
       $(this).text('Start').button("refresh");
    },
);

http://jqueryui.com/demos/button/#method-refresh

Answer 3

после вызова .button () для создания кнопки пользовательского интерфейса jQuery текст кажется удаленным из исходного элемента кнопки и помещенным в <span class = ui-button-text></span> внутри элемента кнопки.

Что-то подобное будет работать:

$("#myButton > .ui-button-text").text("New Text");

Answer 4

Не знаю, ищите ли вы ответ на этот вопрос, но я нашел ваш вопрос. Если вы посмотрите на код с кнопки, jQuery добавит один или два тега. Поэтому вместо того, чтобы переписать все, я заменил кнопку .html () на тот же html, но использовал javascript search () , чтобы отключить метку. Это некрасиво, но это работает. Он также использует метку кнопки для правильного переключения.

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}

Answer 5

Вам нужно сделать .button("refresh")

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

Answer 6

Всегда ли идентификатор кнопки myButton? Если да, тогда просто используйте

$("#myButton").text('Stop');