title: Loading dynamic div content with jQuery from a URL
body: <p>I have a jQuery search script that uses tabs for the user to define which search type they want to use. When a user searches, a URL is created which is something like #<strong>type</strong>/<em><strong>query</em></strong>/. However, when you either reload the page, click a result which goes to a different page or return back from a previous page the search results are no longer there. Why could this be and how can I solve this issue? I do not want to use any plug-ins either.</p>
  
  <p>My jQuery code is:</p>
  
  <pre><code>$(document).ready(function () {
      $('[id^=type_]').click(function () {
          type = this.id.replace('type_', '');
          $('[id^=type_]').removeClass('selected');
          $('#type_' + type).addClass('selected');
          return false;
      });
      $('#type_search').click();
      $('#query').keyup(function () {
          var query = $(this).val();
          var url = '/' + type + '/' + query + '/';
          window.location.hash = '' + type + '/' + query + '/';
          document.title = $(this).val() + ' - My Search';
          $('#results').show();
          if (query == '') {
              window.location.hash = '';
              document.title = 'My Search';
              $('#results').hide();
          }
          $.ajax({
              type: 'GET',
              url: url,
              dataType: 'html',
              success: function (results) {
                  $('#results').html(results);
              }
          });
      });
      var textlength = $('#query').val().length;
      if (textlength &lt;= 0) {
          $('#query').focus();
      } else {
          $('#query').blur();
      }
  });
  </code></pre>