title: Using PagedList in partial views in MVC 4 is throwing off jQuery/JS when navigating 'paged' pages
body: <p>I've just implemented paging using PagedList in my MVC 4 application. The homepage of my app contains a partial view that displays a list of summarised data about certain objects. Beside each list item is a button that when clicked launches a modal window, displaying more information about that particular list item.</p>
  
  <p>All works well on the first 'paged' page of list items, however if I navigate to the second 'paged' page and click the button to launch modal nothing happens. From developer tools in Chrome I get <code>Uncaught TypeError: Object [object Object] has no method 'modal'</code>. </p>
  
  <p>The partial in question outputs the list, contains the DIV for the modal and a JS function to handle the button click event that launches modal windows. Here's the JS from that partial view:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('.show-modal').click(function () {
          var url = $('#modal-view-property-from-get-all').attr('data-url');
          var id = $(this).attr('data-id');
  
          $.get(url + '/' + id, function (data) {
              $('#view-property-from-get-all-container').html(data);
              $('#modal-view-property-from-get-all').modal('show');
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I navigate back to the first 'paged' page, the button doesn't fire either and same uncaught typeError is thrown. Another jQuery plugin I use that truncates multi-line text also stops working and text overflows its containing DIV.</p>
  
  <ol>
  <li>What's actually happening here - why does using paging interfere with JS like this?</li>
  <li>How can I resolve this?</li>
  </ol>
  
  <p><strong>EDIT:</strong></p>
  
  <p>All records of particular type are returned from controller action:</p>
  
  <pre><code>return PartialView("_GetAllPropertiesPartial", model.ToPagedList(pageNumber, pageSize));
  </code></pre>
  
  <p>Since it's a partial, paging navigation is handled by <code>Ajax.ActionLinks()</code>:</p>
  
  <pre><code>@Ajax.ActionLink("&lt;&lt;", "GetAllProperties", new { page = 1 }, new AjaxOptions { UpdateTargetId = "quick-property-search-results" })
  </code></pre>