Ajax +瀏覽器backbutton =複選框不工作

我有一個內容頁面，通過Ajax加載一個複選框。當我點擊我的網頁上的普通菜單按鈕來訪問內容時，複選框的工作方式與它應該一樣。但是當我轉到另一頁面並使用後退按鈕返回到有複選框的頁面時，複選框停止工作。Ajax +瀏覽器backbutton =複選框不工作

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」當我點擊後退按鈕，但如果我測試一個複選框它不會在控制檯中輸出'clicked checkbox'。我怎樣才能做到這一點，即使在我使用瀏覽器後退按鈕後，複選框仍然可以正常工作？

也許相關pageLoad的和後退按鈕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' 和 '點擊複選框' 而不是 '工作'。

來源

2015-01-08 rotaercz

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

來源

2015-01-09 01:05:06 rotaercz

Ajax +瀏覽器backbutton =複選框不工作

回答

相關問題