JQuery Mobile markup in AJAX-loaded tab not working

JQuery Mobile markup in AJAX-loaded tab not working

Hi!

Probably a noob question, but anyway...

I have a tabbed navbar on top of my page. When I click a tab, I want that content to be loaded dynamically and displayed below the tab. Here's my HTML:

  1. <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Bosphorus</title>
        <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"/>   
    </head>

    <body>
    <div data-role="tabs" id="tabs">
        <div data-role="navbar" data-inset="true">
            <ul>
                <li><a href="catalog?start=1&amp;limit=30" data-ajax="false">Catalog</a></li>
                <li><a href="requests" data-ajax="false">Requests</a></li>
                <li><a href="resources" data-ajax="false">Resources</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>

The nested content gets loaded fine, but the jQuery attributes on them seem to be ignored. My nested content looks something like this (Thymeleaf template). The "data-role" tag seems to be ignored. Do I need to run some kind of post-processing on the content to make sure all the jQuery attributes are processed? 

  1. <div data-role="container">
        <ul data-role="listview" th:each="item: ${catalog}">
            <li><a href="#" th:text="${item.catalogItem.name}"></a></li>
        </ul>
    </div>