javascript - jQuery not triggering -
this question has answer here:
sorry not having informative title. try explain want , current problem here. making page shows contents in different categories. there category selector , page bar toggling contents, have create jsfiddle prototype 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 = 2; <= 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 , 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 = 2; <= 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 = start_e; < 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 page loaded, page bar works fine , can toggle contents it. when tried switch types (e.g. type1), script removed original page bar , generate new one. 1 doesn't work anymore.
sorry messy code, new web programming. advice appreciated. thank you.
each time, creating new elements while changing dropdown. should use event delegation bind events new elements.
$(document).on("click",".page a",function () { event delegation allows attach single event listener, parent element, fire children matching selector, whether children exist or added in future.
Comments
Post a Comment