当我在List.js中包含分页管理时，我在点击时切换的行为存在问题。效果首先正常工作，但是当我导航到第2页然后返回第1页时，切换效果没有响应。我必须在分页链接上单击2次才能恢复效果。
如何更正此行为？更一般地说，在问题上调试此类问题的正确策略是什么？
这是一个codepen with the example，下面是js和html代码。
感谢您的帮助！
data-positionvar 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);
});
});
答案 0 :(得分：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>