3

我有一个 PhoneGap 应用程序使用 Openlayers 来显示本地地图。我使用弹出窗口显示标记之前出现的位置信息。我在此弹出窗口中附加了一个链接以重定向到另一个页面,但是当单击弹出窗口重定向时出现错误“未捕获的 ReferenceError:$ 未定义”。新页面仍然显示但没有任何 js 库或加载 css,因此生成错误“未捕获的 ReferenceError:$ 未定义”。我认为从弹出窗口重定向时,所有 js 库都不再位于 DOM 中。我使用 Ajax 加载其他页面并将其添加到 DOM,所以我在第一页中引用的所有 js 库都是 index.html。我在我的应用程序中使用其他重定向成功重定向。

请帮我解决这个错误!谢谢!

4

3 回答 3

1

根据您的代码和我们的对话,在 JQM 之外生成的链接不会被它识别。因此,必须将 jQuery 和 jQuery Mobile 链接到新链接。

在您的代码中,链接是由 OpenLayer 而非 JQM 生成的。

于 2013-04-09T15:17:14.710 回答
0

这是我的代码:

    var init = function () {
    OpenLayers.ImgPath = "images/"
    var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
    sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: "images/mobile-loc.png",
            graphicOpacity: 1.0,
            wrapDateLine      : true,
            graphicWidth: 32,
            graphicHeight: 32,
            graphicYOffset: -26
        })
    });
    //add locations to feature
    addFeature();

    selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, {
        autoActivate:true,
        onSelect: onFeatureSelect,
        onUnselect: onFeatureUnselect
        });
    function onPopupClose(evt) {
        selectControl.unselect(selectedFeature);
    }
    function onFeatureSelect(feature) {
        selectedFeature = feature;
        popup = new OpenLayers.Popup.FramedCloud("chicken",
            feature.geometry.getBounds().getCenterLonLat(),
            null,'<div style="height:40px"><a id="locationListView" href="location-detail.html?id='+
            feature.attributes.LocationID+'&masterID='+"1"+'"><h1 style="color:#FF0000;font-size:16px;margin-bottom: 0px">'+feature.attributes.Name+'</h1><p class="classement '+
            feature.attributes.LocationRating+'">'+feature.attributes.LocationRating+
            ' stars</p></a></div>'
            , null, true, onPopupClose);
        popup.panMapIfOutOfView = true;
        popup.autoSize = true;
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselect(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }

    // create map
    map = new OpenLayers.Map({
        div: "map",
        theme: null,
        projection: sm,
        controls: [
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.TouchNavigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            }),
            selectControl
        ]
    });
    layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layerMapnik.setOpacity(0.4);
    map.addLayer(layerMapnik);
    map.isValidZoomLevel = function(zoomLevel) {
           return ( (zoomLevel != null) &&
              (zoomLevel >= 12) && // set min level here, could read from property
              (zoomLevel <= 16) );
        }

    var newLayer = new OpenLayers.Layer.OSM("Local Tiles", AppPath + "${z}/${x}/${y}.png", { numZoomLevels: 19, alpha: true, isBaseLayer: false,tileOptions: {crossOriginKeyword: null} });
    map.addLayer(newLayer);
    map.addLayer(vector);
    map.addLayer(sprintersLayer);
    //point of center
    //centerPoint = new OpenLayers.LonLat(106.62230325481676,10.856649277232393).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    //if (!map.getCenter()) {
        //map.setCenter(centerPoint, zoom);
    //}
    var style = {
        fillOpacity: 0.1,
        fillColor: '#000',
        strokeColor: '#f00',
        strokeOpacity: 0.6
    };
};

我在 onFeatureSelect(feature) 函数中将链接重定向附加到 Popup 中。重定向到 location-Detail.html 成功后,我在 js 库的第一行出现错误,我使用 $ (jQuery) 获取元素 html。这是 location-Detail.html 的代码。

<!DOCTYPE html> 
<html> 

<!-- Mirrored from ritenv.com/templates/klassio-rsv/gallery.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:17 GMT -->
<head> 

</head> 

<body>

    <div data-dom-cache="false" data-role="page" class="pages" id="locationDetail" data-theme="a">
    <div data-role="header">
            <div class="left">
                <a href="#" class="showMenu menu-button"><img src="images/menu-button.png" width="40" /></a>
                <a href="#" class="back-button"><img src="images/back-button.png" width="40" /></a>
            </div>
            <h1><p class="no-margin" id="category"></p><p class="no-margin">TourGuide</p></h1>

    </div>
        <!-- /header -->

    <div data-role="content" data-theme="a" class="minus-shadow">
        <div class="ui-grid-a" id="places_infos">   
            <div class="ui-block-a" id="LocationImage">
                <p id="imageMain"></p>  
            </div>      
            <div class="ui-block-b">        
                <div id="LocationDescription"></div>
                <div id="starLocationRating" data-number="4"></div>
                <div id="hintLocation"></div>
                <div id="starFavorites"><img class="imageFavorites" src="images/favorites_add.png"></div><br>
                <div><p class="distance" style="height:16px"></p></div>
                <div><a href="#" class="button button9" id="locationMap"><p>Map</p></a></div>
            </div>
    </div><!-- /grid-a -->
        <div id="tabs">
            <ul class="tab-menu-ul"> 
                <li><a href="#tab1">Detail</a></li> 
                <li><a href="#tab2">Gallery</a></li> 
                <li><a href="#tab3">Reviews</a></li>
                <li><a href="#tab4">Share</a></li>
            </ul>
            <div id="tab1">
                <div id="nearPlaces">
                <h1>Nearly Locations:</h1>
                    <ul data-role="listview" data-inset="true" id="locationListView">

                    </ul>
                </div>      
            </div>
            <div id="tab2">
                <a class="button button3" id="takePhoto">Take Photo</a>
                <ul id = "gallery" class="gallery photoswipe column-split  four-column" style="display: inline-block;">
                    <li><a data-ajax="false" href="images/content/stair-case.jpg"><img src="images/content/stair-case.jpg" alt="......." /></a></li>
                    <li><a data-ajax="false" href="images/content/concert.jpg"><img src="images/content/concert.jpg" alt="......" /></a></li>
                    <li><a data-ajax="false" href="images/content/beach.jpg"><img src="images/content/beach.jpg" alt="........." /></a></li>
                    <li><a data-ajax="false" href="images/content/garden.jpg"><img src="images/content/garden.jpg" alt="......." /></a></li>
                </ul>
            </div>
            <div id="tab3">
                    <div class="dropdown-toggle needsclick" id="starRating" data-number="4"></div>
                    <div class="dropdown-toggle needsclick" id="hint"></div>
                  <div id="myComment">
                    <h1>Me: </h1>
                    <ul id="commentList"></ul>
                  </div>
                  <div class="subcontainer">
                    <form method="post" action="" id="comment_form" data-ajax="false">
                        <div>
                            <label for="message" class="formsub">Your Comment:</label>
                            <textarea cols="40" class="textarea" rows="8" name="message" id="comment"></textarea>
                        </div>
                        <div id="loader">
                            <button type="submit" id="submit">SEND</button>
                        </div>
                    </form>
                  </div>
                  <div>
                    <h1>Others: </h1>
                    <ul id="userCommentList"></ul>
                  </div>
            </div>
            <div id="tab4">
                <p> Share with facebook.</p>
            </div>  
        </div>


    </div><!-- /content -->

        <div class="bread-crumb">
            <ul id="linkPage">
                <li><a data-transition="pop" href="index.html"><img src="images/bc-home.png" width="16" /></a></li>
                <li><a data-transition="pop" href="#" id="linkPage1"></a></li>
            </ul>
        </div>
<script>
$(document).ready(function(){
    $('#locationDetail').die().live("pageshow", function( event ) {
        event.preventDefault();
        initLocationDetailPage();
    });
});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34399779-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</div><!-- /page -->

</body>

<!-- Mirrored from ritenv.com/templates/klassio-rsv/gallery.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:35 GMT -->
</html>

我把所有的js库都放在index.html中,其他情况js库也加载成功。对这个错误有什么想法吗?

于 2013-04-09T08:24:36.103 回答
0

索引.html:

<!DOCTYPE html> 
<html> 

<!-- Mirrored from ritenv.com/templates/klassio-rsv/products-services.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:12 GMT -->
<head> 
    <title>Klassio RSV</title> 
    <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />   

    <!-- Home screen icon  Mathias Bynens mathiasbynens.be/notes/touch-icons -->
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icon.png">
    <!-- For first-generation iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon.png">
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="images/icon.png">
    <!-- For nokia devices: -->
    <link rel="shortcut icon" href="images/icon.png">


    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css" />
    <link rel="stylesheet" href="css/themes/default/RSVmain.min.css" />
    <link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.1.1.min.css" />
    <link rel="stylesheet" href="css/flexslider.css">
    <link rel="stylesheet" href="css/photoswipe.css">
    <link rel="stylesheet" href="css/add2home.css">
    <link rel="stylesheet" href="css/TourGuideStyle/listview.css">
    <link rel="stylesheet" href="css/TourGuideStyle/map.css">
    <link rel="stylesheet" href="css/TourGuideStyle/style.mobile-jq.css">
    <link rel="stylesheet" href="css/TourGuideStyle/style.mobile.css">
    <link rel="stylesheet" href="css/TourGuideStyle/locationDetail.css">

        <link rel="stylesheet/less" href="css/style84d5.html?theme=&amp;color=">

     <!-- fonts -->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>

    <script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" src="js/less-1.3.0.min.js"></script>
    <script type="text/javascript" src="js/ref/OpenLayers.js"></script>
    <script type="text/javascript" src="js/ref/OpenStreetMap.js"></script>
        <!--<script type="text/javascript" src="js/jquery-ui-effects.js"></script>-->

    <script src="js/helper.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/iphone-style-checkboxes.js"></script>
    <script src="js/klass.min.js"></script>
    <script src="js/code.photoswipe.jquery-3.0.5.min.js"></script>
    <script src="js/add2home.js"></script>

    <script type="text/javascript" src="js/appbb80.js?v=30"></script>
    <script src="js/ref/jquery.raty.min.js"></script>
    <script type="text/javascript" src="js/ref/fastclick.js"></script>



    <script src="js/TourGuide/InitData.js"></script>
    <script src="js/TourGuide/DataAccess.js"></script>
    <script src="js/TourGuide/LocationGUI.js"></script>
    <script src="js/TourGuide/mobile-base.js"></script>
    <script src="js/TourGuide/mobile-jq.js"></script>
    <script src="js/TourGuide/LocationDetailGUI.js"></script>
    <script src="js/TourGuide/TripGUI.js"></script>
    <script src="js/TourGuide/TripDetailGUI.js"></script>   

</head> 

<body>
     <!-- Splash screen -->
     <!--<div id="splash"> 
       <img id="splash-bg" src="images/splash/splash-alternate.png" alt="splash image"/>
       <img id="splash-title" src="images/splash/main.png" alt="splash title" />
     </div> -->
  <!-- end splash screen --> 
    <div id="menu">
        <ul>
            <li class="active"><a href="index.html" class="contentLink">Home</a></li>
            <li><a href="location.html?id=2" class="contentLink">Restaurants</a></li>
            <li><a href="location.html?id=5" class="contentLink">Hotels</a></li>
            <li><a href="location.html?id=4" class="contentLink">Nightlife</a></li>
            <li><a href="location.html?id=3" class="contentLink">Shopping</a></li>
            <li><a href="location.html?id=1" class="contentLink">Attractions</a></li>
            <li><a href="trip.html" class="contentLink">Trip</a></li>
            <li><a href="blog-detail.html" class="contentLink">Favorites</a></li>
            <li><a href="#" class="contentLink">About Us</a></li>
            <li><a href="#" class="contentLink" onclick="exitFromApp()">Exit</a></li>
        </ul>
    </div><div data-dom-cache="false" data-role="page" class="pages" id="home" data-theme="a">
    <div data-role="header">
            <div class="left">
                <a href="#" class="showMenu menu-button"><img src="images/menu-button.png" width="40" /></a>
            </div>
            <h1><p class="no-margin">HCM TOUR GUIDE</p><p class="no-margin">Capstone Project</p></h1>

    </div>
        <div class="header-shadow"></div>
        <!-- /header -->

    <div data-role="content" data-theme="a" class="minus-shadow">
            <div class="cherry-slider" style="height: 140px;">
                <div anim="puff"anim-speed="700"anim-direction="left"anim-position-left="30"anim-position-top="40"  class="anim-item"><img src="images/content/tick.png" width="64" /></div>
                <div anim="fade"anim-speed="700"anim-direction="left"anim-position-right="30"anim-position-top="40"  class="anim-item"><p class="little-padding ">SINCE 1920</p></div>
                <div anim="fade"anim-speed="700"anim-direction="left"anim-position-right="30"anim-position-top="60"  class="anim-item"><p class="little-padding ">COUNTLESS CUSTOMERS</p></div>
                <div anim="fade"anim-speed="700"anim-direction="down"anim-position-right="30"anim-position-top="80"  class="anim-item"><p class="little-padding ">MEMORABLE EXPERIENCES</p></div>
            </div>
            <div class="white-content-box ">
        <h2 style="margin-top: 0;">Products</h2>
        <a class="icon" href="location.html?id=2">
            <img src="images/content/interior-decoration.png" width="48" />
            <span>Restaurants</span>
        </a>

        <a class="icon" href="location.html?id=5">
            <img src="images/content/cargo-logistics.png" width="48" />
            <span>Hotels</span>
        </a>

        <a class="icon" href="location.html?id=4">
            <img src="images/content/software-development.png" width="48" />
            <span>Nightlife</span>
        </a>
        <a class="icon" href="location.html?id=3">
            <img src="images/content/weather-forecast.png" width="48" />
            <span>Shopping</span>
        </a>
        <a class="icon" href="trip.html">
            <img src="images/content/project-management.png" width="48" />
            <span>Trip</span>
        </a>
        <a class="icon" href="location.html?id=1">
            <img src="images/content/interior-decoration.png" width="48" />
            <span>Attractions</span>
        </a>


        <div class="clear"></div>
            </div>
        <img src="images/shadow.png" />


    </div><!-- /content -->

        <div class="bread-crumb">
            <ul>
                <li><a data-transition="pop" href="index-2.html"><img src="images/bc-home.png" width="16" /></a></li>
                <li><span>Home</span></li>
            </ul>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34399779-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </div>
</body>

<!-- Mirrored from ritenv.com/templates/klassio-rsv/products-services.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:15 GMT -->
</html>

位置.html:

<!DOCTYPE html> 
<html> 

<!-- Mirrored from ritenv.com/templates/klassio-rsv/company-profile.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:08 GMT -->
 <head> 


</head> 

<body>
    <div data-dom-cache="false" data-role="page" class="pages" id="location" data-theme="a">
    <div data-role="header">
            <div class="left">
                <a href="#" class="showMenu menu-button"><img src="images/menu-button.png" width="40" /></a>
                <a href="#" class="back-button"><img src="images/back-button.png" width="40" /></a>
            </div>
            <h1><p class="no-margin" id="category"></p><p class="no-margin">TourGuide</p></h1>

    </div>
        <!-- /header -->

    <div data-role="content" data-theme="a" class="minus-shadow">

            <div class="divselect">
                <select name="select-choice-min" id="select-sub-category" data-mini="true">
                    <option value="all">All</option>
                </select>
                <a href="#" class="button button3" id="mapLocation">Map</a>
            </div>
            <ul class="column-split three-column">
            <li>
                <a class="button button3" id="bestPlace">Best Place</a>
            </li>
            <li>
                <a class="button button3" id="bestNearby">Best Nearby</a>
            </li>
            <li>
                <a class="button button3" id="gps">GPS</a>
            </li>
            </ul>
            <ul data-role="listview" data-inset="true" id="locationListView" data-filter="true"
                                         data-filter-placeholder="Search on Name and Description...">

    </div><!-- /content -->
        <div class="bread-crumb">
            <ul id="linkPage">
                <li><a data-transition="pop" href="index.html"><img src="images/bc-home.png" width="16" /></a></li>
            </ul>
        </div>
<script type="text/javascript">
$('#location').die().live("pageshow", function( event ) {
        event.preventDefault();
        initLocationPage();
    });
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34399779-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</div><!-- /page -->
</body>

<!-- Mirrored from ritenv.com/templates/klassio-rsv/company-profile.php by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 30 Mar 2013 02:13:12 GMT -->
</html>

地图.html:

<!DOCTYPE html> 
<html>
<!-- Mirrored from rodinmobile.webbudesign.com/red/contact.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 12 Mar 2013 16:07:37 GMT -->
<head>

</head> 
<body>

<div data-dom-cache="false" data-role="page" class="pages" data-theme="a" id="mappage">
    <div data-role="content">
     <div id="map" style="height: 100%;width:100%"></div>
    </div>
    <div data-role="footer" class="nav-glyphish">

        <div data-role="navbar" class="nav-glyphish" data-grid="a">
        <ul>
            <li><a href="#" class="back-button" data-icon="custom">Back</a></li>
            <li><a href="#" data-icon="custom" id="myLocation">My Location</a></li>
        </ul>
        </div>

    </div>
    <div id="navigation" data-role="controlgroup" data-type="vertical">
            <a href="#" data-role="button" data-icon="plus" id="plus"
               data-iconpos="notext"></a>
            <a href="#" data-role="button" data-icon="minus" id="minus"
               data-iconpos="notext"></a>
    </div>

<script type="text/javascript">
  $('#mappage').off().on("pageshow", function( event ) {
        event.preventDefault();
        fixContentHeight();
    });
</script>  
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34399779-4']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</div>
</body>

<!-- Mirrored from rodinmobile.webbudesign.com/red/contact.html by HTTrack Website Copier/3.x [XR&CO'2010], Tue, 12 Mar 2013 16:07:37 GMT -->
</html>

如果我运行如下: index.html -> location.html(位置列表) -> location-Detail.html :OK。否则我运行: index.html -> location.html -> map.html -> location-Detail.html :失败

于 2013-04-09T14:23:16.803 回答