分页数据切换操作html

时间:2015-12-30 15:33:42

标签: javascript jquery html twitter-bootstrap-3 pagination

我有类似的东西

<div class="container">
      <h2>Pagination - site</h2>
      <ul class="pagination">
        <li><a data-toggle="tab" href="#tab1">1</a></li>
        <li><a data-toggle="tab" href="#tab2">2</a></li>
        <li><a data-toggle="tab" href="#tab3">3</a></li>
      </ul>
    </div>
<div id="tabcont" class="tab-content">
   <div id="tab1" class="tab-pane">name1</div>
   <div id="tab2" class="tab-pane">name2</div>
   <div id="tab3" class="tab-pane">name3</div>
   <div id="tab4" class="tab-pane">name4</div>
   <div id="tab5" class="tab-pane">name5</div>
</div>
<script>
  var i = null;
  $('a').click(function(){
    console.log(i);
    console.log($(this).text());
    if($(this).text() >= 3){
      if(i < 3 || i === null){
        $('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
        }
        i = $(this.text);

      }else{
        if(i >= 3 || i === null){
        $('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
   }i = $(this.text); }
  });
</script>

第一次代码工作正常和分页,但下次点击功能不起作用,我不知道为什么?

1 个答案:

答案 0 :(得分:0)

您的脚本存在的一个问题是ng-model="addFirm.firmData.clientSelected" 应该是i = $(this.text);。在这里,当你想要字符串时,你将i设置为jQuery对象。

另一个问题是您正在替换绑定了事件处理程序的元素而不附加新事件。

尝试将i = $(this).text();更改为$('a').click(handler)

http://api.jquery.com/on/#on-events-selector-data

$(document).on('click', 'a',handler)

演示: https://jsfiddle.net/SeanWessell/eae71Lqh/