在jquery mobile中textInput方法的行为有多奇怪

Question

Jquery和Jquery Mobile的版本

jquery-1.9.1.min.js
jquery.mobile-1.3.2.min.js

我对input元素

的textinput插件进行了一些测试

这是我的代码

<div data-role="page" id="index">
    <div data-role="content">
        <form>
            <label for="text-1">Text input:</label>
            <input type="text" name="text-1" id="text-1" value="">

            <input type="button" name="text-3" class="btnFinish" value="Finish">
        </form>
    </div>
</div>

<script>
    $(document).on('pageinit', function () {
        $('#text-1').textinput({ theme: 'a' });
        $('.btnFinish').buttonMarkup({corners: false });
    });
</script>

文字输入元素的主题是未更改。但是当我评论pageinit事件时，文本输入元素的主题将被更改。

<script>
        //$(document).on('pageinit', function () {
            $('#text-1').textinput({ theme: 'a' });
            $('.btnFinish').buttonMarkup({corners: false });
        //});
</script>

我正在尝试其他活动，例如pagecreate，pageload，pageshow，文字输入都不会被更改。

我还尝试了jquery中的ready事件，它也没有效果。

但$('.btnFinish').buttonMarkup({corners: false });始终有效。

结论是＆＃34; textinput方法在任何情况下都没有效果？＆＃34;，我认为这很奇怪。有人可以解释一下吗？非常感谢。

Answer 1

当你做某件事时总是以正确的方式做。

首先，当使用页面事件时，总是将其绑定到某个页面或所有页面，如下所示：

$(document).on('pagecreate', '#index', function(){ 
    $('#text-1').textinput({ theme: 'a' });
    $('.btnFinish').buttonMarkup({corners: false });
});

或者这个：

$(document).on('pagecreate', '.ui-page', function(){ 

});

另外，因为一些jQuery Mobile小部件在更改主题时有点乱，所以总是尝试在 pagecreate 或 pagebeforcreate 事件。主要是因为此时jQuery Mobile仍在等待增强HTML标记。

使用jsFiddle示例：http://jsfiddle.net/Gajotres/PMrDn/104/

使用的Javascript：

$(document).on('pagecreate', '#index', function(){ 
    $('#text-1').textinput({ theme: 'a' });
    $('.btnFinish').buttonMarkup({corners: false });
});

最后的建议，永远不要使用jQuery Mobile准备文档（人们告诉你的）。这有几个原因，请详细了解 here 。

如果您有更多问题，请随时发表评论。