1

我遇到了一个看似简单的问题。我想以编程方式更改/更新按钮的按钮文本。但是，在查看了这里关于 SO 的几个不同的类似问题之后，我仍然没有更接近。

我正在使用带有 jQ​​uery 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

常见的方式有以下三种：

经典解决方案：

$(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 回答