Javascript 防止在引导选项卡中加载动态contnet两次

我有一个引导选项卡，它通过分页加载动态页面内容。我使用的是codigniter框架。流动的jquery可以很好地加载特定选项卡中的内容，但我在firebug中注意到，每当我切换到另一个选项卡，然后返回到上一个选项卡时，它就会再次加载选项卡内容

如何防止单击时再次加载上一个选项卡

这是我的网页

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTabs">    
        <li id="home"><a href="#home"  class="active" data-toggle="tab" id="page">Home</a></li>
        <li id="foo"><a href="#get_all_division" data-toggle="tab" id="page">Foo</a></li>
        <li id="bar"><a href="#get_all_district" data-toggle="tab" id="page">Bar</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home"></div>
        <div class="tab-pane" id="get_all_division"></div>
        <div class="tab-pane" id="get_all_district"></div>
    </div>
</div>

<script>
    $(function() {
        var baseURL = 'http://allinfo/area/';
        //load content for first tab and initialize
            $('#get_all_division').load(baseURL+'get_all_division', function() {
                $('#myTabs').tab(); //initialize tabs
            }); 

        $('#get_all_division').on('click', 'a.page', function() {
            $('#get_all_division').load($(this).attr('href'));
        return false;

        });

            $('#get_all_district').load(baseURL+'get_all_district', function() {
                $('#myTabs').tab(); //initialize tabs
            }); 


        $('#get_all_district').on('click', 'a.page', function() {
            $('#get_all_district').load($(this).attr('href'));
        return false;
        });

        $('#myTabs').bind('show', function(e) {    
           var pattern=/#.+/gi //use regex to get anchor(==selector)
           var contentID = e.target.toString().match(pattern)[0]; //get anchor         
           //load content for selected tab
            $(contentID).load(baseURL+contentID.replace('#',''), function(){
                $('#myTabs').tab(); //reinitialize tabs
            });
        });
    });
</script>

$（函数（）{
var baseURL=http://allinfo/area/';
//加载第一个选项卡的内容并初始化
$（'get#u all_division'）。加载（baseURL+'get#u all_division'，函数（）{
$（'#myTabs'）.tab（）；//初始化选项卡
}); 
$（'get#u all_division'）。在（'click'，'a.page'，function（）上{
$（'#get_all_division'）.load（$（this.attr（'href'））；
返回false；
});
$（'get#u all_district'）。加载（baseURL+'get#u all_district'，函数（）{
$（'#myTabs'）.tab（）；//初始化选项卡
}); 
$（'get#u all_district'）。在（'click'，'a.page'，function（）上{
$（'#get_all_district'）.load（$（this.attr（'href'））；
返回false；
});
$（'#myTabs'）.bind（'show'，function（e）{
var pattern=/#.+/gi//使用正则表达式获取锚点（=选择器）
var contentID=e.target.toString（）.match（pattern）[0]；//获取锚点
//加载选定选项卡的内容
$（contentID）.load（baseURL+contentID.replace（'#'，''），function（）{
$（'#myTabs'）.tab（）；//重新初始化选项卡
});
});
});

在使用回调隐藏选项卡或单击其他选项卡时，可以使用.empty（）删除加载的内容

$('#get_all_district').load(baseURL+'get_all_district', function() {
            $('#get_all_division').empty();
            $('#myTabs').tab(); //initialize tabs
 }); 

---

我不想把内容清空。仅加载一次。单击时不希望再次加载。然后，您可能希望添加一个计数以检查元素是否已被单击检查此项，如果第二个选项卡有另一个单击事件，则必须初始化第二个计数，以使其不受另一个选项卡中加载的内容的影响。。。希望有帮助！