当我在分页中使用它时,我在使用.load()ajax / jquery时遇到问题。当我转到另一页时,我的复选框的状态将不会保留。例如,我检查了第1页中的2个项目,然后当我转到第2页以选择另一个项目时,然后当我返回到第1页以测试我的选中项目是否仍然被选中时。不幸的是,它可能因为.load()而未经检查。请帮助我,如果有替代方法可以使用.load()来保持我的复选框选中。
这是我的代码.load()ajax:
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});
$(".paginate_click").click(function (e) {
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
});
$(this).addClass('active');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');}); //initial page number to load
$('body').on('click', '.paginate_click', function(e){
// Get all the checked boxes and store their ID in an array
var ticked = [];
$('.tick:checked').each(function(){
ticked.push($(this).attr("id"));
});
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
// Content has loaded but is still raw
// We loop through IDs and check'em
ticked.forEach(function(val, i){
$(val).prop('checked', true);
});
});
$(this).addClass('active');
return false;
});
});
</script>
嗨@charleshaa它不起作用这就是我对我的剧本所做的
这是我的复选框代码
echo "<div id='a'><input type='checkbox' class='tick' name='items[$i]' id='$i' value='". $item['ItemID'] ."' >".$item['ItemName']."</div>";
出了什么问题?我非常需要帮助
答案 0 :(得分:0)
您需要在变量中保留复选框,以便在加载后重新检查它们。
首先在您的复选框class="tick"
中添加一个类。
然后你会:
$(".paginate_click").click(function (e) {
// Get all the checked boxes and store their ID in an array
var ticked = [];
$('.tick:checked').each(function(){
ticked.push($(this).attr("id"));
});
var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
var page_num = parseInt(clicked_id[0]);
$('.paginate_click').removeClass('active');
$("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
// Content has loaded but is still raw
// We loop through IDs and check'em
ticked.forEach(function(val, i){
$(val).prop('checked', true);
});
});
$(this).addClass('active');
return false;
});
修改强>
此外,最好不要使用.click()
表示法,而应始终使用.on()
在这个例子中,你会这样写:
$('body').on('click', '.paginate_click', function(e){
//code
});
性能要好得多,因为它只将一个事件监听器附加到正文,而不是将每个事件监听器附加到.paginate_click
。
检查我对唯一ID的评论,你应该好好去。