jQuery Mobile 1.3.2 使用面板时出错

Question

我正在尝试使用jQuery Mobile 1.3.2实现面板功能。 这是我的代码：

    <div data-role="page" id="homePage">
    <section data-role="panel" class="row">
        PANEL HERE..
    </section>
    <section data-role="header" class="row">
        <div class="large-12 columns">
            <h3>
                Header..
            </h3>               
        </div>          
    </section>
    <section data-role="content" class="row">
        <div class="large-12 columns">
            CONTENT..               
        </div>          
    </section>
    <section data-role="footer" class="row">
        <div class="large-12 columns">
            FOOTER..                
        </div>          
    </section>
    <script type="text/javascript">
        $(function ()
        {
        }());
    </script>
</div>

当我运行这是一个浏览器时，我收到一个错误：

$.data（...） 未定义

我已经将其追溯到jquery.mobile-1.3.2.js的第10330行：

var $theme = $.data( page[0], "mobilePage" ).options.theme,

我错过了什么？

Answer 1

我看到jQuery移动panel与jQuery 2.0不兼容。

您收到错误：

类型错误："未定义"不是对象（评估 'a.data（d[0]，"mobilePage"）.options'）

尝试降级到 jQuery 1.9 它适用于它。

演示：http://jsfiddle.net/IrvinDominin/3wUts/

Answer 2

如果您在jquery移动javascript文件中快速搜索术语"mobilePage"并将其更改为"mobile-page"，它将起作用。应该只有一个匹配项。我遇到了这个问题，并让它这样工作。

修复的来源是：https://github.com/jquery/jquery-mobile/issues/6200

Answer 3

我在脚本包含标题中的行之后添加了此代码：

<script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
  var jqDataOrg = $.data;
  $.data = function (a, b, c) { return jqDataOrg(a, b === "mobilePage" ? "mobile-page" : b, c); };
</script>

它允许我继续使用 jQuery 2 和 CDN 进行分发。可能会有一些我不知道的副作用，所以要小心。