Przycisk wywołania ("odśwież") na przycisku mobilnym jQuery łamie styl przycisku

Question

Próbuję dynamicznie aktualizować tekst na przycisku mobilnym jQuery. Przycisk jest faktycznie łączem, który jest stylizowany jako przycisk.

Zgodnie z jQuery mobile documentation należy zadzwonić pod numer button("refresh"), jeśli manipulujesz przyciskiem za pomocą javascript. Jednak kiedy to robię, styl przycisku jest szalony - zmniejsza się do połowy wysokości, a przycisk wygląda na bzdurny.

Here's a JS Fiddle which demonstrates the problem.

Kod jest zasadniczo w następujący sposób:

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $button.text("Awesome Button"); 
     $button.button("refresh"); 
    }); 
}); 

Co więcej, nazywając button("refresh") powoduje błąd javascript: Cannot call method 'removeClass' of undefined.

wiem, że mogę obejść ten problem poprzez manipulowanie .ui-btn-textspan który jest zagnieżdżony wewnątrz przycisku; wydaje się to jednak błędne podejście, ponieważ wymaga wyraźnej wiedzy na temat wewnętrznych działań jquery Mobile.

Czy ktoś może mi powiedzieć, jak uzyskać odświeżanie połączenia do pracy?

Korzystanie wersje:

• jQuery 1.9.1
• jQuery Komórka 1.3.0 (w JSFiddle to 1.3.0 beta ale ostateczna ma takie samo zachowanie).

Dzięki!

Answer 1

EDIT:

Niestety czytać szybko i nie widzi, że szukałeś specjalnie dla funkcjonalności odświeżania. Jak zauważyłeś jQM nie oferuje tego na przyciskach znaczników kotwicy.

Dobrze alternatywą jest po prostu zastąpić przycisk na nowy i niech jQM dodać znaczników jak przed

• http://jsfiddle.net/rfdQC/4/

JS

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    var $clone = $button.clone(); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $clone.text("Awesome Button"); 
     $clone.button(); 
     $button.replaceWith($clone); 
    }); 
}); 

Nadzieja pomaga to!

oryginalny:

Po prostu trzeba drążyć dodanego znaczników nie jQM dodaje.

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text"> 
      Click me! 
     </span> 
    </span> 
</a> 

Zmieniasz przycisk tekst:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    Awesome Button 
</a> 

ten sposób tracisz dodatkową znaczników jQM potrzebuje do wyświetlania przycisku. Musisz zmienić tekst zagnieżdżonego zakresu.

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $button.children().children().text("Awesome Button"); 
    }); 
}); 

bez odświeżania potrzebne:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text"> 
      Awesome Button 
     </span> 
    </span> 
</a> 

żywo Przykład:

• http://jsfiddle.net/rfdQC/3/

Answer 2

Nieważne; Właśnie znalazłem to w górnej części dokumentacji:

Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

Chociaż właściwie nie rozwiązać mój problem (w jaki sposób zaktualizować tekst przycisku) - przynajmniej odpowiedzi dlaczego „odświeżyć” metoda nie jest obsługiwana .

Edit:

Zdaję sobie sprawę, że mogę bezpośrednio aktualizacja tekst na przycisku; Powiedziałem tak samo w pytaniu oryginalnym:

I know that I can work around this problem by manipulating the .ui-btn-text span that's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.

Miałem nadzieję, że uda mi się uniknąć tego rozwiązania, dzięki czemu metoda "odświeżania" działa. Jednak na podstawie fragmentu dokumentacji, który później znalazłem (i zacytowałem powyżej), zdałem sobie sprawę, że używanie metody "odświeżania" nie było możliwe.

Biorąc to pod uwagę; Nadal miałem nadzieję, że istnieje inny sposób aktualizowania tekstu na przycisku bez wyraźnego adresowania wygenerowanych elementów DOM (tj. Za pomocą interfejsu API jQM) - ale o ile widzę, nie ma na to metody interfejsu API. Aktualizacja elementów DOM wydaje się jedynym sposobem na osiągnięcie pożądanego rezultatu.

Oba selektory dostarczone przez @Phil Pafford ($(this).find('span span')) i @ OmarNew2PHP ($button.children().children()) są (moim zdaniem) niepoprawne.Tak, oni doskonale pracować w podanym wyżej przykładzie, jeśli jednak dodać ikonę do przycisku:

<a id="myCrapButton" href="#" data-icon="delete">Click me!</a> 

Następnie jQM dodaje się dodatkową span do wyświetlenia tej ikony (atrybuty tagu zakotwiczenia przycięte dla zwięzłość):

<a href="#"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text">Delete</span> 
     <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span> 
    </span> 
</a> 

Używanie selektorów powyżej doda tekst do zarówno wewnętrznych span tagów. Jest to kolejny przykład, dlaczego miałem nadzieję uniknąć bezpośredniego aktualizowania DOM - ponieważ nie można (i nie trzeba) przewidywać, co jQM będzie generować.

Ale pod koniec dnia, to wygląda na to najlepszy sposób aktualizacji tekstu wewnątrz przycisku jest przy użyciu metody Miałem nadzieję uniknąć:

$button.click(function() { 
    $(".ui-btn-text", this).text("Awesome Button"); 
}); 

Dzięki za odpowiedzi.

Answer 3

Spędziłem wiele godzin na to i wreszcie ten pracował dla mnie. Rodzaj czystego rozwiązania. Tak więc, jeśli masz skrypt, który tworząc następujący kod HTML wewnątrz elementu

<div id="buttonParent"> 
    <a href='#' id="1_button" data-role="button">Click me</a> 
    <a href='#' id="2_button" data-role="button">Another Click me</a> 
</div> 

następnie wywołanie poniżej odświeżyć przycisków.

jQuery('#buttonParent').trigger('create'); 

Uwaga: poniżej nie działało i podawano wyjątki.

jQuery('#1_button').button('refresh') 

Może pomóc komuś mnie polubić. To była strata czasu. jqm musi naprawić ten błąd. Miałem zawijanie wokół tego przycisku dla zwijanego zestawu i odświeżanie na tym działało dobrze, ale to odświeżenie na przycisku ciągle powodowało błędy. To było bardzo denerwujące.