I have a content page which is loaded via Ajax with a checkbox on it. The checkboxes works as it should when I click the normal menu buttons on my webpage to get to the content. But when I go to another page and use the back button to get back to the page which has the checkboxes, the checkboxes stop working.
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 );
});
});
}
If you look at the above code, the console will output 'aaa' when I click on the back button but if I test a checkbox it will not output 'clicked checkbox' in the console. How can I make it so the checkboxes will keep working even after I use the browser back button?
Maybe relevant PageLoad and Backbutton Ajax code:
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('');
}
}});
});
}
I've also tried:
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
Which will output 'aaa' and 'clicked checkbox' but not 'working'.
Figured it out with help from others on StackOverflow. Here's the answer:
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 );
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.