动态 JQuery 移动列表视图

Question

我正在尝试通过 JSONP 调用动态构建 litview。但是，列表视图没有被填充。 JSONP 位已经过测试，所以这应该不是问题。

这是我的代码...

<div data-role="page" class="pages" id="aircraft_step3" data-theme="a">

        <!-- Header Begin -->
        <div data-role="header" class="header" data-theme="a">
        <a href="#" class="showMenu menuBtn">Menu</a>
        <div class="logo">&nbsp;</div>
        </div>
        <!-- /header -->

        <!-- breadcrumb -->
        <ul class="breadcrumb">
            <li><a href="#home"><div class="homeicon"></div></a></li>
            <li><a href="#aircraft_step1" title="aircraft search" data-transition="flow">Aircraft Search</a></li>
            <li><a href="#aircraft_step2" title="manufacturer" data-transition="flow">Manufacturer</a></li>
            <li><a href="#aircraft_step3" title="listings" data-transition="flow">Listings</a></li>
        </ul>
        <!-- / breadcrumb-->

        <!-- Content Begin -->
        <div data-role="content">
            <h3>Please select an aircraft.</h3>
            <ul id="aircraftList" data-role="listview" data-inset="true" data-filter="true" >
            </ul>
        </div>
        <!-- /content -->
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#aircraft_step3', function(){  
            //set up string for adding <li/>
            var li = "";
            $.getJSON("my_url?callback=?",
                function(data){
                  $.each(data.items, function(i,item){
                    li += '<li><a href="" data-transition="slidedown"><img src="'+item.Image+'" style="width:80px;height:80px;"/> <span style="font-size:0.75em;">' + item.Manufacturer + ' ' + item.Model + ' ' + item.Price + '</span><br/><span style="font-size:0.65em;">S/N: ' + item.Serial + ' | TTAF: ' + item.TTAF + ' | LOC: ' + item.Location + '</span><br/><span style="font-size:0.65em;"> ' + item.DealerName + ' </span></a></li>'
                  });
                $("#aircraftList").append(li);
                $("#aircraftList").listview().listview('refresh');
                });
            })
    </script>
    </div>

Firebug 控制台出现以下错误：

ReferenceError: $ 未定义

$(document).on('pagebeforeshow', '#aircraft_step3', function(){

任何想法是什么问题/为什么没有填充列表视图？

更新

这是对 JS/JQUERY/JQM 的完整引用集，它们都位于 html 页面的底部。

<!-- Javascripts is down of the page for fast open -->
    <script src="assets/js/vendor/modernizr-2.6.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="assets/js/vendor/zepto.min.js"></script>
    <script src="assets/js/helper.js"></script>
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/add2home.js" charset="utf-8"></script><!-- Iphone Bubble  -->

    <!--  Photo Swipe Gallery  -->
    <script src="assets/js/klass.min.js"></script>
    <script src="assets/js/photoswipe.js"></script>
    <!--  Photo Swipe Gallery End -->

    <!--  Photo Swipe Gallery Custom JS  -->
    <script type="text/javascript">
        $(document).ready(function(){
            var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
        });
    </script>

    <!--  Photo Swipe Gallery Custom JS End-->

    <!-- Slider -->
    <script src="assets/js/jquery.flexslider.js"></script>
    <script>
    $(document).ready(function() {
        $('.flexslider').flexslider({
                  slideDirection: "vertical",
                  animation: "slide",
                  start: function(slider){
                    $('.flexslider').css("max-height" , "574px");
                }
            });
    });
    </script>
    <!-- / Slider -->

Answer 1

我运行的是旧版本的 Jquery 和 JQM，因此代码无法正常工作。

更新到当前库意味着现在可以按预期工作。

非常感谢@Omar