1

jQuery mobile 在将elme 增强为Widget 后会插入大量元素。

例如，“a”将在“a”之后插入两个 span elem 增强为按钮。那么，如何在“a”增强为按钮后正确修改a的innerText呢？

4

1 回答 1

1

第一种官方方法不存在，因此必须手动完成。

有两种常见的方式：

经典解决方案：

    $(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/

解决方案/插件位置：https ://stackoverflow.com/a/7279843/1848600

于 2013-03-11T22:49:39.617 回答