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

17

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

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");
    });

});

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

    
задан Yako 24.03.2013 в 11:37
источник

5 ответов

36

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

    
ответ дан TechyTimo 11.01.2015 в 20:07
источник
3

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

Вот рабочий пример: Ссылка

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();
});
  • Вам не хватает данных-role="button" внутри кнопки тега
  • Поскольку кнопка была изначально создана без текста, вам нужно добавить соответствующую внутреннюю структуру с двумя пролетами

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

Есть еще одно решение этой проблемы, и его можно найти в этом СТАТЬЯ + описание и рабочий пример.

    
ответ дан Gajotres 24.03.2013 в 12:47
источник
1

Взгляните на структуру 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>

Источник: Ссылка

    
ответ дан Jasper 24.03.2013 в 18:32
источник
0

У меня была такая же проблема, и мне не удалось выяснить, почему это происходит. Но зная, что после инициализации внутри кнопки помещается пролет с классом «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);
}
    
ответ дан Plamen 02.09.2013 в 23:17
источник
0

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

    
ответ дан semion zloi 22.10.2016 в 15:30
источник