让 JS 加载到 JQM 页面上答案

【问题标题】：get JS to load on JQM page让 JS 加载到 JQM 页面上
【发布时间】：2013-03-24 15:39:17
【问题描述】：

我正在尝试让一个插件在 JQM 上运行，但我需要它在第二页处于活动状态时等待并加载。现在，它在启动时加载。我的页面设置为data-role='page'。这是我的代码：

$(document).ready(function(){
    $("#two").bind('pageinit')
    jQuery(".namesleft").fitText();
    jQuery(".scoreleft").fitText();
    jQuery(".namesright").fitText();
    jQuery(".scoreright").fitText();
});

提前感谢您的帮助

【问题讨论】：

标签： jquery jquery-mobile jquery-plugins jquery-mobile-pageshow

【解决方案1】：

这是一个有效的 jsFiddle 示例：http://jsfiddle.net/Gajotres/F2Gcm/

$(document).on('pageshow', '#index', function(){       
    $("h1").fitText(0.273);
    $(".download").fitText(1);
});

应该使用

On 方法而不是 live 方法来绑定页面事件，live 方法已被弃用并且在 jQuery 中不存在1.9+。

这也应该绑定到 pageshow 事件，因为它不会在任何其他情况下工作。 jQuery Mobile 对插件进行视觉更改非常严格，这种插件只能在 pageshow 事件中工作。

如果您想更好地了解 jQuery Mobile 页面事件，请查看此 ARTICLE，或查找它HERE。

【讨论】：

【解决方案2】：

jQuery mobile 可以替代$(document).ready。代码应如下所示：

    <script type="text/javascript">
       $('div:jqmData(role="page")').live('pagebeforeshow',function(){
             // code to execute on each page change
       });
</script>

事实上，jQm 有一整套事件替代常规 jQuery 事件： http://jquerymobile.com/demos/1.2.1/docs/api/events.html

【讨论】：

所以你说我的代码应该是这样的？
是的，如果您希望它只在特定页面上运行，您可以更改选择器。

【解决方案3】：

您可以在 JQM 的 pageshow 事件中添加您的代码，例如：

$("#two").live('pageshow', function(){
    $(".namesleft, .scoreleft, .namesright, .scoreright").fitText();
});

【讨论】：

这使得插件根本不工作不知道为什么，但它确实