[英]Ajax + browser backbutton = checkbox not working
我有一個內容頁面,該頁面通過Ajax加載並帶有一個復選框。 當我單擊網頁上的常規菜單按鈕以獲取內容時,該復選框可以正常工作。 但是,當我轉到另一個頁面並使用“后退”按鈕返回到具有復選框的頁面時,這些復選框將停止工作。
HTML:
<div id="filters">
<ul id="filters-background">
<li id="option-type">Filter Options</li>
<li class="wave2"><label for="white">White<input type="checkbox" name="white" value=".White" id="white"></label></li>
<li class="wave2"><label for="blue">Blue<input type="checkbox" name="blue" value=".Blue" id="blue"></label></li>
</ul>
</div>
<script type="text/javascript">
OnSort();
</script>
JS:
function OnSort(e) {
console.log('aaa');
// filter button click
var filterCheckboxes = $('#filters input');
var filters = [];
filterCheckboxes.change(function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}
如果您看上面的代碼,當我單擊后退按鈕時,控制台將輸出“ aaa”,但是如果我測試復選框,則在控制台中將不會輸出“單擊的復選框”。 如何做到這一點,即使我使用瀏覽器的“后退”按鈕,復選框也能正常工作?
也許相關的PageLoad和Backbutton Ajax代碼:
function OnLoadPage(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: 'GET',
url: pageurl,
success: function(data) {
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
// update url
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert('ERROR:' + response.responseText);
}
});
}
function InitOverrideBrowserBackButton() {
// override the back button to get the ajax content without page reload
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab', success: function(data){
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
}});
});
}
我也嘗試過:
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
它將輸出“ aaa”和“單擊的復選框”,但不輸出“工作”。
在StackOverflow上的其他人的幫助下找到了答案。 答案如下:
function OnSort(e) {
console.log('aaa');
// filter button click
var filters = [];
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
$('#filters input', document).filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.