jquery-ui“.draggable 不是函数”，错误

Question

我收到以下错误（使用 Firefox 3.5.9）：

$("#dragMe_" + myCount).draggable is not a function
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });  Line 231 
http://www.liamharding.com/pgi/pgi.php

链接到有问题的页面： http: //www.liamharding.com/pgi/pgi.php

单击上述链接后，请按照以下步骤操作：单击 2 复选框的“R25 + R50 Random Walk”，然后单击 显示/刷新图表。应显示两个图表，两者都带有可拖动的细水平红线。

重新打开选项面板，取消选择R50 Random Walk，现在再次点击Show/Refresh Graphs，1张图表被删除，另一张图表被更新；现在重新选择R50随机游走并单击显示/刷新，R25图更新正常，然后出现上述错误，我无法计算找出原因。

最初，当显示前两个图表时，它使用相同的代码并且工作得很好。

错误发生在这一行：

//********* ERROR OCCURS HERE **********
$("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });

以下是 Show/Refresh Graphs.click() 事件 的代码：

$("#btnShowGraphs").click(function(){
        // Hide 'Options' panel (only if open AND an index is checked)
        if (IsOptionsPanelOpen && ($("#indexCheck:checked").length != 0)) {$('#optionImgDiv').click();};

        var myCount = 0;
        var divIsNew = false;
        var gif_loader_small = '<div id="gif_loader_small"></div>';
        var gif_loader_big = '<div id="gif_loader_big"></div>';

        $("input:checkbox[id=indexCheck]").each(function() {

            if (this.checked) {
                // check for an existing wrapper div for the current forex item, using the current checkbox value (foxex name)
                if ( $("#"+this.value).length == 0 ) {

                    console.log("New 'graphContainer' div : "+this.value);

                    divIsNew = true;
                    // Create new divs for graph image, drag bar and heading
                    var $structure = " \
                        <li id=\""+this.value+"\" class=\"graphContainer\"> \
                            <div id=\"dragMe_"+myCount+"\" class=\"dragMe\"></div> \
                            <div id=\"image_"+myCount+"\" class=\"image\"></div> \
                            <div id=\"heading_"+myCount+"\" class=\"heading\"></div> \
                        </li> \
                    ";
                    $('#graphResults').append($structure);
                    // Hide dragMe DIV
                    $('#dragMe_'+myCount).hide();
                    // Make 'dragMe' draggable div

                    //********* ERROR OCCURS HERE **********
                    $("#dragMe_"+myCount).draggable({ containment: 'parent', axis: 'y' });
                }

                // Display small loading gif
                $(gif_loader_small).clone().appendTo( $(this).parent() );

                // Display large circular loading gif
                var $loader = $(gif_loader_big);
                // add temporary css attributes onto existing graph divs as they need to be displayed diffrently
                if(!divIsNew){

                    console.log("Reposition existing 'gif_loader_big' div");

                    $loader = $(gif_loader_big).css({
                        "position" : "absolute",
                        "top" : "35%",
                        "opacity" : ".85"});
                }

                // add newly styled big-loader-gif to index div
                $loader.clone().prependTo( $("#"+this.value) );

                // Call function to fetch image using ajax
                get_graph(this, myCount, divIsNew);

            } else { 
                // REMOVE 'graphContainer' DIVS NOT CHECKED
                // check for div existance
                if ( $("#"+this.value).length != 0 ) {

                    console.log("DESTROY: #dragMe_"+myCount+", REMOVE: #"+this.value);

                    // DESTROY draggable
                    //$("#dragMe_"+myCount).draggable("destroy");
                    // remove div
                    $("#"+this.value).remove();
                }
            }
            // reset counters and other variables
            myCount++;
            divIsNew = false;

            console.log("Complete: "+this.value+", NEXT index");

        });
    });