Pageinit沒有被解僱的鏈接的頁面

在我的主頁有一個列表視圖，其中的每個單元有一個鏈接到同一頁，但使用不同的URL參數：Pageinit沒有被解僱的鏈接的頁面

<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>

來源

2013-06-20 user1012480

的pageinit事件是你找...嘗試導航到player.html頁面下面的JavaScript代碼是正確的：

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

這迫使重新加載頁面，即使它已經在頁面容器的DOM中。

你也可以嘗試改變$("#playerPage").on('pageinit',function(){到$(document).on('pageinit', '#playerPage',function(){。

來源

2013-07-11 13:24:00

Pageinit沒有被解僱的鏈接的頁面

回答

相關問題