Web部分不工作!!为什么？

Question

我已经编写了jquery来为页面布局中的每个选项卡创建一个Web部件区域。标签已经出现并且有一个Web部件区域但它不起作用，并且在编辑页面之前也可以查看Web部件区域。

    <script>
$( document ).ready(function() {InsertTabs();});

function InsertTabs(){  

    var val=["Tab1","Tab2"];
    var attrID = ""; 
    var activeTabFade = ""; 
    var activeTabVar = "";  
    var index = 0;
    for(value in val){

        var title = value;              
        if(index == 0) {
            activeTabFade = "in"; activeTabVar = "active";
        }               
        $("#TopSPTabs").append('<li class="'+activeTabVar+'"><a href="#Tab'+index+'" id="TabHead'+index+'" data-toggle="tab">'+title+'</a></li>').after('<div class="tab-pane fade '+activeTabFade+ ' ' +activeTabVar+'" id="Tab'+index+'"></div>');                
        var webPart = '<div class="ms-SPZoneLabel"><span class="ms-webpart-zone-title ms-noWrap">Zone 1</span></div><div ondragenter="MSOLayout_MoveWebPartDragZoneEnter(this, event);" ondragover="MSOLayout_MoveWebPartStopEventBubble(event);" class="ms-SPZone ms-webpart-zone ms-fullWidth " id="MSOZone" zoneID="g_74D304E354064D6780C33FA9DE8BF9A2" zoneTitle="Zone 1" orientation="Vertical" onclick="WzClick(event, &#39;g_74D304E354064D6780C33FA9DE8BF9A2&#39;)" cellspacing="10px" class="ms-webpart-zone ms-fullWidth"><div orientation="Vertical" ondragenter="MSOLayout_MoveWebPartDragEnter(this);" ondragover="MSOLayout_MoveWebPartDragOver(event, this, "False");" style="vertical-align:top;width:;min-width:;padding:8px;"><div class="ms-SPButton ms-WPAddButton" onclick="CoreInvoke(&#39;ShowWebPartAdder&#39;, &#39;g_74D304E354064D6780C33FA9DE8BF9A2&#39;);return false;"><a href="javascript:" onclick="CoreInvoke(&#39;ShowWebPartAdder&#39;, &#39;g_74D304E354064D6780C33FA9DE8BF9A2&#39;);return false;"><span>Add a Web Part</span></a></div></div><div orientation="Vertical" ondragenter="MSOLayout_MoveWebPartDragEnter(this);" ondragover="MSOLayout_MoveWebPartDragOver(event, this, 'False');" align="center" valign="middle" id="MSOZone_EmptyZoneCell" data-iszonecell="true" style="height:10px;padding:0;">&#160;<span class="ms-spzonecaption" name="MSOZoneCell_emptyZoneText" webPartsInZone="0">&#160;<br></span></div></div>';               
        $("#Tab" + index).append((webPart));
        activeTabFade = ""; 
        activeTabVar = ""; 
        index++;

    }
}
</script>
<style>.tab-content{margin-top:10px;} .tab-pane{margin-top:0 !important;}</style>
<div class="tab-content" id="tabContents"><ul id="TopSPTabs" class="nav nav-tabs"></ul></div></div><div class="ms-clear"></div>

在编辑模式下创建的页面布局的页面。

创建的页面布局没有编辑模式的页面。