1

単純な問題のように見える問題が発生しています。ボタンのボタンテキストをプログラムで変更/更新したい。ただし、ここSOでいくつかの異なる同様の質問を調べた後、私はまだ近づきません。

jQuery 1.9 および JQM 1.3 Final で Chrome を使用しています。

HTML (このブロックは、フッターに属するグリッド内にあります)

<div class="ui-block-b">
    <div class="ui-bar ui-bar-e" style="height:40px"> 
       <a href="#" class="footerWishOption footerDeleteWish" data-role="button" data-icon="trash">Slett ønske</a>
    </div>
</div>

JS

changeButtonText は、ここにあるプラグインです。

// 1. Does not work
$('.footerDeleteWish').changeButtonText("Gjenopprett
ønske"); 

// 2. Does not work                                                          
$('.footerDeleteWish .ui-btn-text').text("Gjenopprett ønske");
$('.footerDeleteWish').refresh();

// 3. Does not work
$('.footerDeleteWish').text("Gjenopprett ønske").refresh();

更新/解決策:

以下の回答でコメントとして述べたように、問題はフッターの可視性でした。フッターはDOMで作成されましたが、非表示になっているため、セレクターはそれを見つけられませんでした。

4

1 に答える 1

3

次の 3 つの一般的な方法があります。

古典的な解決策:

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn span span').text('This is a new text');
});

実際の例: http://jsfiddle.net/Gajotres/EjVfz/

このソリューションは、将来のボタンの実装で何も変わらず、すべてが同じままであることを期待しています。

慎重な解決策:

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn').find('.ui-btn-text').text('This is a new text');
});

実際の例: http://jsfiddle.net/Gajotres/QHg3w/

このソリューションは安全なソリューションです。どのボタンの例が使用されても (a、ボタン、入力)、ボタン テキストは常に .ui-btn-text クラス内にあります。

ボタンテキストプラグインの変更

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-btn').changeButtonText('This is a new text');
});

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

実際の例: http://jsfiddle.net/Gajotres/mwB22/

于 2013-03-12T14:13:27.930 に答える