0

Sorry for not having a informative title. I will try to explain what I want to do and what is my current problem here. Basically I am making a page that shows contents in different categories. There is a category selector and a page bar for toggling contents, I have create a Jsfiddle as prototype for your easy ref.

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");
    });
});

When the page loaded, the page bar works just fine and i can toggle the contents with it. But when I tried to switch my types (e.g. Type1), my script removed the original page bar and generate a new one. But this one doesn't work anymore.

Sorry for my messy code, I am very new to web programming. Any advice would be appreciated. Thank you.

Barmar
  • 741,623
  • 53
  • 500
  • 612
tingfungc
  • 115
  • 1
  • 1
  • 9

1 Answers1

2

Each time, you are creating new elements while changing the dropdown. So you should use event delegation to bind events for the new elements. 

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

Demo

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

Anoop Joshi P
  • 25,373
  • 8
  • 32
  • 53