javascript - 使用数据切换操作 html 进行分页

Question

我有这样的东西

<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>

第一次代码工作正常并且分页，但下次点击功能不起作用，我不知道为什么？

Answer 1

脚本的一个问题是 i = $(this.text); 它应该是 i = $(this).text();。当您需要字符串时，您可以将 i 设置为 jQuery 对象。

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

尝试将 $('a').click(handler) 更改为 $(document).on('click', 'a',handler)

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

  var i = null;
  $(document).on('click', 'a[data-toggle="tab"]', 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();
    }
  });

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