jQuery not triggering

对不起，没有一个翔实的标题。我会试着解释我想做什么，我现在的问题是什么。基本上，我正在制作一个页面，显示不同类别的内容。有一个类别选择器和切换内容的页面栏，我已经创建了一个Jsfiddle作为原型，为您方便参考。

    <div class="row">Type
        <select id="type" style="margin-left:57px; width:153px;">
            <option value="all">ALL</option>
            <option value="type1">Type1</option>
            <option value="type2">Type2</option>
            <option value="type3">Type3</option>
        </select>
    </div>
    <div class="data_cat">
        <div class="data-type1" id="0">type10</div>
        <div class="data-type2" id="0">type20</div>
        <div class="data-type3" id="0">type30</div>
        <div class="data-type1" id="1">type11</div>
        <div class="data-type2" id="1">type21</div>
        <div class="data-type3" id="1">type31</div>
        <div class="data-type1" id="2">type12</div>
        <div class="data-type2" id="2">type22</div>
        <div class="data-type3" id="2">type32</div>
        <div class="data-type1" id="3">type13</div>
        <div class="data-type2" id="3">type23</div>
        <div class="data-type3" id="3">type33</div>
        <div class="data-type1" id="4">type14</div>
        <div class="data-type2" id="4">type24</div>
        <div class="data-type3" id="4">type34</div>
        <div class="data-type1" id="5">type15</div>
        <div class="data-type2" id="5">type25</div>
        <div class="data-type3" id="5">type35</div>
        <div class="data-type1" id="6">type16</div>
        <div class="data-type2" id="6">type26</div>
        <div class="data-type3" id="6">type36</div>
        <div class="data-type1" id="7">type17</div>
        <div class="data-type2" id="7">type27</div>
        <div class="data-type3" id="7">type37</div>
        <div class="data-type1" id="8">type18</div>
        <div class="data-type2" id="8">type28</div>
        <div class="data-type3" id="8">type38</div>
        <div class="data-type1" id="9">type19</div>
        <div class="data-type2" id="9">type29</div>
        <div class="data-type3" id="9">type39</div>
        <div class="data-type1" id="10">type10</div>
        <div class="data-type2" id="10">type20</div>
        <div class="data-type3" id="10">type30</div>
    </div>
    <div class="page"> 

JS:

var news_per_page = 4;
$(".data_cat > *:gt("+(news_per_page-1)+")").hide();
/* make page indicator*/
var total_page = Math.ceil($(".data_cat > *").size()/news_per_page);
$('div.page').empty();
var pagehtml = '<a class="all" id="active">1</a>';
for(var i = 2; i <= total_page; i++)
    pagehtml+='<a class="all">'+i+'</a>';
$('div.page').html(pagehtml);
$(function () {
    /*     category switching */
    $('#type').change(function () {
        if ($('#type').val() == 'all') {
            $('.data_cat > *').hide();
        } else {
            /*     hide and show contents*/
            $('.data_cat > *').hide();
            var s = '.data-' + $('#type').val();
            $(s + ":lt(" + news_per_page + ")").show();
            /*    page bar*/
            var total_page = Math.ceil($(s).size()/news_per_page);
            $('div.page').empty();
            var pagehtml = '<a id="active">1</a>';
            for(var i = 2; i <= total_page; i++)
                pagehtml+='<a >'+i+'</a>';
            $('div.page').html(pagehtml);
        }
        $('div.page > a').removeClass().addClass($('#type').val());
    });
    /*    page switching */
    $('.page a').click(function () {
        $('.data_cat > *').hide();
        var type = $(this).attr("class")
        var page = $(this).text();
        var start_e = (page-1)*news_per_page+1;
        var end_e = start_e+news_per_page;     
        if (type == 'all') {
            var s = 'div.data_cat ';
            for(var i = start_e; i < end_e; i++){
                $(s+':hidden:nth-child('+i+')').show();  
            }
        } 
        else {
            start_e-=2;
            end_e=news_per_page;
            var s = 'div.data_cat div.data-' + type;
            if(start_e<=0){
                $(s+":lt("+end_e+")").show();  
            }
            else
                $(s+":gt("+start_e+"):lt("+end_e+")").show();  
        }
        $('.page a').removeAttr("id");
        $(this).attr("id","active");
    });
});

当页面加载时，页面栏工作得很好，我可以用它切换内容。但是当我尝试切换类型(例如Type1)时，我的脚本删除了原始的页面栏并生成了一个新的。但是这个不能用了。

对不起我的凌乱的代码，我是非常新的web编程。任何建议都将不胜感激。谢谢你。