Question

我有两个页面，我使用swipeleft和swiperight事件（来回）链接但是当我滑到另一页时，jquery不会触发pageinit事件，我只剩下页眉和页脚。我应该使用changePage事件还是应该使用loadPage事件？我知道jquerymobile的另一个版本中有一个错误，其中pageinit事件没有触发，但我已经使用已经解决了它的RC1，但事件仍未触发。什么阻止它开火？提前谢谢。

代码如下：

      <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>esports</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<link rel="stylesheet" href="jquery.zrssfeed.css" />
</script>

<style>


</style>
</head>
<body>
<!-- index -->
<div data-role="page" id="index">
    <div data-role="header">
        <h1>esports times</h1>
    </div>
    <!--/header-->
    <div data-role="content" id="content">
        <div id="currentFeed">teamliquid. &nbsp; skgamin</div>
        <ul id="rssFeed" data-role="listview">
        </ul>
    </div>
</div>

</body>
</html>

<!-- load javscripts here-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js">     </script>
<script src="jquery.zrssfeed.js"></script>
<script>
    $('#index').bind("pageinit", (function () {
        $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
            limit: 10,
            date: false,
        });
    }));

    $('#index').bind("swipeleft", function () {
        $.mobile.changePage("teamliquid.html", "slide", true, false);
    });
</script>

<!-- /javascript-->

Answer 1

更改页面是您正在寻找的。加载页面只是将其加载到dom中，因此您可以在实际显示页面之前进行操作。

绑定到页面init时，请确保使用唯一ID绑定pageinit事件。他们不能都有id =“＃index”。还要确保将页面init绑定到每个页面。您的代码只会针对#index页面而不是teamliquid.html触发pageinit。

在文档的<head></head>中使用以下内容：

$(document).on('pageinit','#index', function(){
    $('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
      limit: 10,
      date: false,
    });
});
$(document).on('pageinit','#otherpage', function(){
    ... This would be for the other page you are referring to....
});
$(document).on('swipeleft','#index', function(){
    $.mobile.changePage("teamliquid.html", { transition: "slide" });
});
$(document).on('swiperight','#otherpage', function(){
    $.mobile.changePage("index.html", { transition: "slide" });
});

或者获取每个页面的firein页面

$(document).on('pageinit','[data-role=page]', function(){
    ....ground breaking code...    
});

从jquery 1.7开始，bind，live和delegate都使用.on（）方法。这是为JQM绑定pageinit的推荐方法。你也可以做一些很酷的事情，比如用'[data-role = page]'替换'#index'，以便在每一页上激活你的代码。这是一个JSfiddle，证明这确实有效。 http://jsfiddle.net/codaniel/cEWpy/2/

Answer 2

尝试使用
$(function() { /* dom ready */ });
而不是$('#index').bind("pageinit", (function () { ... }));

然后你可以将脚本标签放在head-tag中，删除第9行的孤立</script>，你就有了干净的HTML，一切都会正常工作。

jquery pageinit没有解雇

2 个答案: