enhanceWithin doesn't work after replacing content

enhanceWithin doesn't work after replacing content

So I thought I should build myself a simple pager for a listview. Very simple: I'm slapping a spinbox near the bottom and subscribing to change events with a little snippet that loads portions of the page and replaces the listbox content with that. 

So my HTML (Thymeleaf template looks like this):

  1. <div data-role="container" id="catalog-container">

    <ul id="catalog-item-list" data-role="listview">

    <th:block th:each="item: ${catalog.content}">

        <li><a th:attr='href=${"editrequest/" + item.catalogItem.id}'>

    <img th:attr='src=${"catalogicon/" + item.catalogItem.iconId}'/>

    <h2 th:text="${item.catalogItem.name}"/>

    <p th:text="${item.catalogItem.description}"/>

    </a></li>

    </th:block>

    </ul>

    <div data-role="footer" class="bsp-paginator">

    <input type="text" data-role="spinbox" data-options='{"type":"horizontal"}' 

    name="catalog-page" id="catalog-pager" min="1" th:attr="max=${catalog.metadata.totalPages}, value=${pageNumber}"/>

    </div>

    </div> 


    <script>

    $(document).on("change", "#catalog-pager", function(event) {

    console.log(event.target.id)

    changeListPage(event, 'catalog', '#catalog-item-list', event.target.value, 2)

    })

    </script>

The changeListPage function looks like this:

  1. function changeListPage(event, file, parent, value, size) {

    event.preventDefault()

    $.ajax({url:file + "?limit=" + size + " + &start=" + value, success: function(response) {

            $(parent).replaceWith($(response).find(parent))

            $(parent).enhanceWithin()

        }})

Works fine, EXCEPT that I haven't found a way to get the enhancements to kick in on the listview. I've tried sending create events, refresh events, what have you... Nothing!

Any ideas?