javascript - jQuery pageinit不触发

我有2个页面是使用swipeleft和swiperight事件(来回)链接的(来回)，但是当我滑动到另一页面时，jQuery不会触发pageinit事件，而我只剩下页眉和页脚。我应该使用changePage事件还是应该使用loadPage事件？我知道在其他版本的jquerymobile中有一个错误，其中pageinit事件不会触发，但是我已经在使用RC1了，该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-->

最佳答案

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

绑定(bind)到页面init时，请确保使用唯一ID绑定(bind)pageinit事件。他们不能都具有id =“＃index”。还要确保将页面初始化绑定(bind)到每个页面。您的代码仅会针对#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" });
});

或为每个页面获取pageinit以进行触发

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

从jQuery 1.7开始，绑定(bind)，事件和委托(delegate)都使用.on()方法。这是为JQM绑定(bind)pageinit的推荐方法。您还可以做一些很酷的事情，例如将'#index'替换为'[data-role = page]'，以使您的代码在每个页面上触发。这是一个JSfiddle，证明这确实有效。 http://jsfiddle.net/codaniel/cEWpy/2/

关于javascript - jQuery pageinit不触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9883459/

PageInit

javascript - jQuery pageinit不触发