Geek asks and answers

Call button (“update”) on jQuery mobile button violates button style

I am trying to dynamically update text on jQuery mobile button. A button is actually a link called a button.

According to jQuery mobile documentation , you should call button("refresh")if you manipulate the button through javascript. However, when I do this, the button style goes, but crazy - it gets compressed to half the height, and the button looks like crap.

Here's a JS script demonstrating the problem .

The code essentially looks like this:

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

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

What more, the call button("refresh")raises a javascript: error Cannot call method 'removeClass' of undefined.

, , .ui-btn-text span, ; , jquery Mobile.

- , ?

:

  • jQuery 1.9.1
  • jQuery Mobile 1.3.0 ( JSFiddle it 1.3.0 beta, ).

!

+5
3

:

, , . jQM, .

, - jQM

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

, !

:

, jQM.

<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>

:

<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>

, . jQM . .

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

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

:

<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>

:

+3

. :

. , , , , . buttonMarkup , (, , ) . ( ), ui-disabled JavaScript .

( ) - , , "refresh" .

Edit:

, ; :

, , .ui-btn-text span, ; , jquery Mobile.

, - "refresh" . , ( ), , "refresh" .

; , DOM (.. jQM API), - , , API. DOM .

, @Phil Pafford ($(this).find('span span')) @OmarNew2PHP ($button.children().children()), ( ) . , , , :

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

jQM span, ( ):

<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>

span. , DOM - ( ) , jQM.

, , - , :

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

.

+2

, , , . . , javascript, html

<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>

.

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

, .

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

May help someone else like me. It was a waste of time. jqm needs to fix this error. I had a wrapper around this button for a collapsibleset and an update on what worked fine, but this update on the button kept throwing errors. It was very unpleasant.

+1
source

More articles:


All Articles