javascript - jQuery 未触发

Question

抱歉，没有提供信息丰富的标题。我将尝试在这里解释我想要做什么以及我当前的问题是什么。基本上我正在制作一个显示不同类别内容的页面。有一个类别选择器和一个用于切换内容的页面栏，我创建了一个 Jsfiddle as prototype供您轻松引用。

HTML:

    <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)时，我的脚本删除了原始页面栏并生成了一个新页面栏。但这个已经不起作用了。

抱歉我的代码很乱，我对网络编程很陌生。任何意见，将不胜感激。谢谢。

Answer 1

每次，您都会在更改下拉列表的同时创建新元素。所以你应该使用 event delegation为新元素绑定(bind)事件。

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

Demo

事件委托(delegate)允许您将单个事件监听器附加到父元素，该事件监听器将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。