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

Question

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

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

这里是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){}被触发，它将一次又一次地绑定$(".list li").on('click', function(row){} 。

您可以尝试双击page 1，然后您会发现切换不起作用（实际上切换了两次，所以好像没有切换）。

当您再次点击时，您会发现切换功能又起作用了。（实际上是切换了三次）

解决方法很简单，先解绑再绑定$(".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>

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

How correctly handle toggle effect in List.js list with pagination

javascript

toggle

list.js