Невозможно вызвать методы до инициализации; попытался вызвать метод 'refresh'

Я хочу обновить значение кнопки ссылки, щелкнув элемент меню.

Html:

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

jQueryMobile:

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html($(this).html()).slideDown().button("refresh");
});

Текстовое обновление работает нормально, но кнопка css не обновляется должным образом.

Я получаю следующую ошибку:

Непринятая ошибка: не может вызывать методы на кнопке до инициализации; попытался вызвать метод 'refresh'

О какой инициализации мы говорим? Страница и кнопка уже инициализированы, не так ли?

EDIT:

Я также пробовал это:

$(document).on("mobileinit", function() {

    $('#selected').hide();

    $("#menu li a").on('click',function(){
        $('#selected').html($(this).html()).slideDown().button("refresh");
    });

});

Нет сообщения об ошибке; но нет текстового обновления: (

Ответ 1

Проблема иногда вызвана конфликтами jquery-ui и bootstrap-button. Код jquery-ui должен идти до bootstrap.js, и это решает проблему.

Ответ 2

Рабочий пример

Вот рабочий пример: http://jsfiddle.net/Gajotres/BDmex/

HTML:

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

JS:

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html('<span class="ui-btn-inner"><span class="ui-btn-text">' + $(this).html() + '</span></span>').slideDown();
});

Вам не хватает данных-роли = "button" внутри кнопки тега
Поскольку кнопка была изначально создана без текста, вам нужно добавить соответствующую внутреннюю структуру с двумя пролетами

Второе решение

Другое решение этой проблемы можно найти в этом СТАТЬЯ + описании и рабочем примере.

Ответ 3

Взгляните на структуру HTML вашего элемента ссылки #selected после инициализации jQuery Mobile (с помощью инспектора DOM). Фактический текст находится внутри элемента span с классом ui-btn-text. Поэтому, когда вы обновляете HTML-кнопку с помощью функции .html(), вы переписываете структуру HTML, созданную jQuery Mobile, тем самым удаляя форматирование, добавленное jQuery Mobile.

Вы можете выбрать элемент .ui-btn-text, который является потомком вашей кнопки, чтобы обновить текст, не удаляя форматирование.

Измените это:

$('#selected').html($(this).html()).slideDown().button("refresh");

$('#selected').find(".ui-btn-text").html($(this).html()).slideDown();

FYI, вот как выглядит инициализированная кнопка тега привязки HTML:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

Источник: http://view.jquerymobile.com/1.3.0/docs/widgets/buttons/

Ответ 4

У меня была такая же проблема, и мне не удалось выяснить, почему это происходит. Но зная, что после инициализации внутри кнопки помещается пролет с классом "ui-btn-text", я обходим его так:

var button = $("#selected");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}

Ответ 5

У меня была та же самая проблема, которую я решил, удалив 2 "" final html, поэтому я думаю, что это несовершенство на странице назначения html