Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

Question

Objective: Load HTML content via $.ajax, insert it into the DOM, have jQuery Mobile apply theme styles to it.

Problem: Content gets inserted but lacks jQuery Mobile theming.

Code:

$.ajax({
    ...
    success: function(html) {
        $('#container').append(html);
        $('#page').page('refresh', true);
    }
});

The HTML returned includes data-role tags which jQM should style...

<a data-role="button">Do Something</a>

Instead of applying the styles like it should, I get the following error:

uncaught exception: no such method 'refresh' for page widget instance

---

Above code tested using http://code.jquery.com/mobile/latest/jquery.mobile.js

---

Similar questions which brought me to the above error message:

Consistently update page with appropriate jQuery Mobile styles

JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied

jQuery Mobile - Dynamically creating form elements

Answer 1

Just got an answer to a similar question, try using

.trigger("create")

on the element that gets the content added to.

See here: jQuery Mobile does not apply styles after dynamically adding content