Question

Here are the codes I have to dynamically create and enhance a page. The similar pattern has been working for many other kinds, such as text field, button, grid-view, etc. But I found it cannot work with a listview.

$(document).bind("pagebeforechange", function route(e, data) {
    ...
    $content = $page.children(":jqmData(role=content)");
    var markup = '<ul id="calendarList" data-role="listview"><li>HELLO</li></ul>';
    $content.html(markup);
    $page.trigger('create');
    $.mobile.changePage($page);
});

I would always get an error message like,

Cannot read property 'jQuery16409763167318888009' of undefined

Through debugging using Chrome, I found it always fails on the line of $page.trigger(‘create’);

Answer 1

I found the solution myself. It works fine if I replaced the line,

$page.trigger('create');

with,

$page.page();
$content.find( ":jqmData(role=listview)" ).listview();

However, I still don’t understand why. I thought the former was a newer, simpler syntax to replace the latter. A single call of $page.trigger(‘create’); can enhance the entire page at one shot. Does anyone know the difference of these two?