Javascript jQuery未触发

很抱歉没有一个信息丰富的标题。我将试着解释我想做什么，我现在的问题是什么。基本上，我正在制作一个页面，显示不同类别的内容。有一个类别选择器和一个用于切换内容的页面栏，我已经为您创建了一个简单的参考

HTML:

类型
全部的
类型1
类型2
类型3
类型10
类型20
类型30
类型11
类型21
类型31
类型12
类型22
类型32
类型13
类型23
类型33
类型14
类型24
类型34
类型15
类型25
类型35
类型16
类型26
类型36
类型17
类型27
类型37
类型18
类型28
类型38
类型19
类型29
类型39
类型10
类型20
类型30

JS:

var news\u per\u page=4；
$（“.data\u cat>*：gt（“+（新闻/第1页）+”）.hide（）；
/*生成页面指示器*/
var total\u page=Math.ceil（$（“.data\u cat>*”）.size（）/news\u每页）；
$（'div.page'）.empty（）；
var pagehtml='1'；
对于（var i=2；i，每次都是在更改下拉列表的同时创建新元素。因此，应该使用来绑定新元素的事件

 $(document).on("click",".page a",function () {


事件委派允许您将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子元素触发，无论这些子元素现在存在还是将来添加。
如果您对多个元素使用相同的id，请改为使用类。使用事件侦听器而不是单击。单击仅适用于当前已添加的元素它在页面上。on也适用于将来创建的元素。移动
活动的
ID不是一种好的方式。使用类而不是ID。正如PO所说，他每次都在创建寻呼机栏。这不起作用。是的，你检查小提琴了吗？是的，每次都显示12个。这不是问题。他的问题是，他不能选择类型后切换内容的步骤。
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");
    });
});

 $(document).on("click",".page a",function () {