Question

在我的主页上有一个列表视图，其中每个元素都有指向同一页面的链接，但具有不同的URL参数：

<a href="player.html?video=34&movie=4354"></a>
<a href="player.html?video=435&movie=75"></a>
<a href="player.html?video=7632&movie=4975"></a>

这些链接工作正常，他们将我重定向到页面player.html;问题是这里没有触发事件pageinit：

  <div data-role="page" data-add-back-btn="true" id="playerPage">
        <script>
            var favStorageKey = "youtubeTheaterFav";
            var videoID = $.url().param("video");
            var movieID = $.url().param("movie");

            $("#playerPage").on('pageinit',function(){
                console.log("init");
            }
        </script>

但是，如果我刷新页面，则会触发事件。有没有办法在首次加载页面时触发它？编辑：这是player.html：

<!DOCTYPE html>
<html>
<head>
    <title>Youtube Theater</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    <script src = "js/themoviedb.js"></script>
    <script src = "js/youtube.js"></script>
    <script src="js/purl.js"></script>
    <script src="js/jquery.fitvids.js"></script>

    <style>
        div.movie-info{font-size: 16px;margin-top: 10px; margin-bottom: 5px}
        .toogle-container .ui-slider-switch { width: 9em}
    </style>

</head>
<body>
    <div data-role="page" data-add-back-btn="true" id="playerPage">
        <script>
            var favStorageKey = "youtubeTheaterFav";
            var videoID = $.url().param("video");
            var movieID = $.url().param("movie");

            $(document).on('pageinit',"#playerPage",function(){
                console.log("init");
                $("#embdPlayer").attr("src","http://www.youtube.com/embed/" + videoID + "?autoplay=1");
                $.when(getMovieInfo(movieID)).then(function(movie){
                    $("#poster").attr("src",movie.poster);
                    $("#title").html(movie.title + " <small>(" + movie.released +  ")</small>");
                    $("#plot").html(movie.plot);
                    $("#cast").html("<strong>Director: </strong>" + movie.director+"<br> <strong>Stars: </strong>" + movie.cast);
                    if(isFavorite()){
                        $("#favoriteSlider").val("on").slider("refresh");
                    }else{
                        $("#favoriteSlider").val("off").slider("refresh");
                    }
                });
                $("#playerContainer").fitVids();
            });

            function getFavorites(){
                var savedFavorites = localStorage.getItem(favStorageKey);
                return JSON.parse(savedFavorites);
            }

            function isFavorite(){
                if(localStorage.getItem(favStorageKey)){
                    var fav = getFavorites();
                    return fav[videoID]!=undefined;
                }
                return false;
            }

            function removeFromFavorites(){
                var favMap = getFavorites();
                delete favMap[videoID];
                localStorage[favStorageKey] = JSON.stringify(favMap);
            }

            $("#favoriteSlider").change(function(){
                if(isFavorite()){
                    removeFromFavorites();
                }else{
                    saveToFavorites();
                }
            });



            function saveToFavorites(){
                var film = {
                    movie: movieID,
                    title: $("#title").text(),
                    poster: $("#poster").attr("src")
                }
                var favorites={};
                if(localStorage.getItem(favStorageKey)){
                    favorites = getFavorites();
                }
                favorites[videoID] = film;
                localStorage.setItem(favStorageKey,JSON.stringify(favorites));
            }

        </script>

        <div data-role="panel" id="movieInfo" data-position="right" data-display="push" class="toogle-container">
            <H3 id="title"></H3>
            <img id="poster">
            <div id="plot"></div>
            <div id="cast"></div>
            <select data-role="slider" id="favoriteSlider">
                <option value="off">Unfavorite</option>
                <option value="on">Favorite</option>
            </select>
        </div>

        <div data-role="header" >
            <H1>Youtube Theater</H1>
            <a href="#movieInfo" data-icon="info">Movie Info</a>

        </div>

        <div data-role="content">

            <div id="playerContainer">
                <iframe id = "embdPlayer" width="560" height="315"  frameborder="0" ></iframe>

            </div>

        </div>

      </div>



</body>
</html>

Answer 1

pageinit事件是您正在寻找的事件...尝试使用以下JavaScript代码导航到player.html页面：

 $.mobile.changePage( "player.html?video=34&movie=4354", { reloadPage : true });

这会强制重新加载页面，即使它已经在页面容器的DOM中。

您也可以尝试将$("#playerPage").on('pageinit',function(){更改为$(document).on('pageinit', '#playerPage',function(){。

Pageinit没有为链接页面触发

1 个答案: