title: jQuery code works the first time and the second time works only after page refresh
body: <p>I have a jquery code to load data in page . The part in this code <strong>concerning the pagination</strong>  works at the first time and the second time it doesn't work only after page refresh.</p>
  
  <p>-The first time when I click on a link of page in pagination , the jquery code works and th ajax query is called well.</p>
  
  <p>-The seconde time when I click on a link of page of pagination , the jquery code is ignored and the link in the pagination work as a simple link as if there is not a jquery code.</p>
  
  <pre><code>&lt;div id="mydiv"&gt;
     {% for entity in entities %}
      //...
     {% endfor %}
  
  {{ knp_pagination_render(entities) }}
  
  &lt;/div&gt;
  
  
      &lt;script&gt;
      $(document).ready(function () {
  
          $("ul#pagination a").on('click', function (e) {
              e.preventDefault();
  
              $('ul#pagination li.active').removeClass("active");
  
              var route = $(this).attr('href');
  
              window.history.pushState(null, "Title", route);
  
              return loadPage(route);
  
          });
  
          function loadPage(route) {
              $.ajax({
                  type: 'get',
                  dataType: 'html',
                  url: route,
                  success: function (msg) {
                      if (msg === undefined) {
                          alert('error');
                      }
                      else {
                          $('#mydiv').html(msg);
                      }
                  }
              });
  
          }
  
          window.onpopstate = function () {
              loadPage(window.location.href);
          };
  
          });
  &lt;/script&gt;
  </code></pre>