在JQM页面上加载JS

Question

我试图得到一个插件在JQM上运行，但我需要它等待和加载时，第二页是活跃的。现在，当它启动时，它正在加载。我用data-role='page'设置了我的页面。下面是我的代码:

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

提前感谢您的帮助

Answer 1

这里是一个工作的jsFiddle示例:http://jsfiddle.net/Gajotres/F2Gcm/

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

应该使用方法来代替live方法来绑定页面事件，live方法已被弃用，并且在jQuery 1.9+中不存在。

这也应该绑定到pageshow事件，因为它不会在任何其他情况下工作。jQuery Mobile对插件做视觉改变是严格的，这种类型的插件只能在pageshow事件中工作。

如果你想更好地了解jQuery Mobile页面事件，请查看这篇文章，或者在这里找到它。

Answer 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

Answer 3

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

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