javascript - 如何正确处理带有分页的List.js列表中的切换效果

Question

当我在 List.js 中包含分页管理时，我遇到了单击切换行为的问题。该效果首先正常工作，但是当我导航到第二页然后返回第一页时，切换效果没有响应。我必须点击分页链接两次才能恢复效果。

我该如何纠正这种行为？更一般地说，调试此类问题的正确策略是什么？

这是一个codepen with the example ，下面是js和html代码。

感谢您的帮助!

var options = {
  valueNames: [
    'date',
    'conversions',
    'revenue',
    'cr'
  ],
  page: 3,
  pagination: true
};

var userList = new List('users', options);

function hide_and_toggle(userList){
  $('.row-toggle').hide();
  $(".list li").on('click', function(row){
    $(this).find('.row-toggle').toggle();
  });
}

$(function(){
  hide_and_toggle(userList);

  userList.on('updated', function(userList){
    hide_and_toggle(userList);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">
    <input class="search" placeholder="Search" />

      <div class="row">
        <button class="sort col" data-sort="date">
          Sort by Date
        </button>
        <button class="sort col" data-sort="conversions">
          Sort by Conversion Count
        </button>
        <button class="sort col" data-sort="revenue">
          Sort by Revenues
        </button>
        <button class="sort col" data-sort="cr">
          Sort by CR
        </button>
      </div>

  <ul class="list">
    <li data-id="1">
      <div class="row">
        <div class="col text-center date">1</div>
        <div class="col text-center conversions">10</div>
        <div class="col text-center revenue">100</div>
        <div class="col text-center cr">1000</div>
      </div>
      <div class="row row-toggle"> 
        <div class="col">
          <span> Goals</span>
          <table class="table-sm">
          <tr>
            <td>Install</td>
            <td>20</td>
          </tr>
          <tr>
            <td>First listen</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Purchase</td>
            <td>4</td>
          </tr>
        </table>
        </div>
        <div class="col">
          <span>Scrubed & Overdelivery</span>
          <table class="table-sm">
            <tr>
              <td>Scrubed</td>
              <td>30</td>
              <td>200</td>
            </tr>
            <tr>
              <td>Over Delivery</td>
              <td>40</td>
              <td>400</td>
            </tr>
          </table>
        </div>
      </div>
    </li>
    <li data-id="2">
      <div class="row">
        <div class="col text-center date">2</div>
        <div class="col text-center conversions">20</div>
        <div class="col text-center revenue">200</div>
        <div class="col text-center cr">2000</div>
      </div>

      <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 2
        </div>
      </div>
    </li>
    <li data-id="3">
      <div class="row">
       <div class="col text-center date">3</div>
        <div class="col text-center conversions">30</div>
        <div class="col text-center revenue">300</div>
        <div class="col text-center cr">3000</div>
      </div>

      <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 3
        </div>
      </div>
    </li>
    <li data-id="10">
      <div class="row">
        <div class="col text-center date">10</div>
        <div class="col text-center conversions">100</div>
        <div class="col text-center revenue">1000</div>
        <div class="col text-center cr">10000</div>
      </div>

       <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 10
        </div>
      </div>
    </li>
  </ul>
  <ul class="pagination"></ul>
</div>

Answer 1

根本原因:

如果触发 userList.on('updated', function(userList){} ，则会绑定(bind) $(".list li").on('click', function(row){} 一次又一次。

你可以尝试双击第1页，然后你会发现切换不起作用(实际上切换了两次，所以看起来没有切换)。

当您再次单击时，您会发现切换再次起作用。 (实际上是切换了3次)。

解决办法很简单，只要先解绑再绑定(bind)$(".list li").on('click')即可。

var options = {
  valueNames: [
    'date',
    'conversions',
    'revenue',
    'cr'
  ],
  page: 3,
  pagination: true
};

var userList = new List('users', options);

function hide_and_toggle(userList){
  $('.row-toggle').hide();
  $( ".list li").unbind( "click" ); //clear up event binding.
  $(".list li").on('click', function(row){
    $(this).find('.row-toggle').toggle();
  });
}

$(function(){
  hide_and_toggle(userList);

  userList.on('updated', function(userList){
    hide_and_toggle(userList);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">
    <input class="search" placeholder="Search" />

      <div class="row">
        <button class="sort col" data-sort="date">
          Sort by Date
        </button>
        <button class="sort col" data-sort="conversions">
          Sort by Conversion Count
        </button>
        <button class="sort col" data-sort="revenue">
          Sort by Revenues
        </button>
        <button class="sort col" data-sort="cr">
          Sort by CR
        </button>
      </div>

  <ul class="list">
    <li data-id="1">
      <div class="row">
        <div class="col text-center date">1</div>
        <div class="col text-center conversions">10</div>
        <div class="col text-center revenue">100</div>
        <div class="col text-center cr">1000</div>
      </div>
      <div class="row row-toggle"> 
        <div class="col">
          <span> Goals</span>
          <table class="table-sm">
          <tr>
            <td>Install</td>
            <td>20</td>
          </tr>
          <tr>
            <td>First listen</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Purchase</td>
            <td>4</td>
          </tr>
        </table>
        </div>
        <div class="col">
          <span>Scrubed & Overdelivery</span>
          <table class="table-sm">
            <tr>
              <td>Scrubed</td>
              <td>30</td>
              <td>200</td>
            </tr>
            <tr>
              <td>Over Delivery</td>
              <td>40</td>
              <td>400</td>
            </tr>
          </table>
        </div>
      </div>
    </li>
    <li data-id="2">
      <div class="row">
        <div class="col text-center date">2</div>
        <div class="col text-center conversions">20</div>
        <div class="col text-center revenue">200</div>
        <div class="col text-center cr">2000</div>
      </div>

      <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 2
        </div>
      </div>
    </li>
    <li data-id="3">
      <div class="row">
       <div class="col text-center date">3</div>
        <div class="col text-center conversions">30</div>
        <div class="col text-center revenue">300</div>
        <div class="col text-center cr">3000</div>
      </div>

      <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 3
        </div>
      </div>
    </li>
    <li data-id="10">
      <div class="row">
        <div class="col text-center date">10</div>
        <div class="col text-center conversions">100</div>
        <div class="col text-center revenue">1000</div>
        <div class="col text-center cr">10000</div>
      </div>

       <div class="row row-toggle"> 
        <div class="col">
          <table>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
        </div>
        <div class="col">
          Content On the side 10
        </div>
      </div>
    </li>
  </ul>
  <ul class="pagination"></ul>
</div>