作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我在分页中使用 .load() ajax/jquery 时,我遇到了问题。当我转到另一个页面时,我的复选框的状态将不会保留。例如,我在第 1 页中选中了 2 个项目,然后当我转到第 2 页选择另一个项目时,然后当我返回到第 1 页来测试我选中的项目是否保持选中状态时。不幸的是,它可能由于 .load() 而未被选中。如果有其他方法可以使用 aside .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>";
怎么了?我非常需要帮助
最佳答案
您需要将复选框保留在变量中,以便在加载后重新检查它们。
首先向复选框添加一个类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 的评论,您应该可以开始了。
关于javascript - ajax 加载应在选中时保持我的复选框的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25501594/
我是一名优秀的程序员,十分优秀!