Ajax + 浏览器后退按钮 = 复选框不起作用答案

【问题标题】：Ajax + browser backbutton = checkbox not workingAjax + 浏览器后退按钮 = 复选框不起作用
【发布时间】：2015-01-09 09:05:06
【问题描述】：

我有一个通过 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'和'clicked checkbox'但不是'working'。

【问题讨论】：

标签： javascript jquery html ajax checkbox

【解决方案1】：

在 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 );
        });
    });
}

【讨论】：