Question

The databox plugin works well in a static jQuery Mobile html page. The scripts defined in header are:

        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>

The line for the datebox input is:

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>

However, once I dynamically inject some other elements into the same page, like

$(document).bind("pagebeforechange", function route(e, data) {
    ...
    $page.trigger('create');
    ...

As a result, I can see all elements are displayed well, including the datebox button. But clicks on the datebox button would not pop up anything.

I compare the two versions of html codes after enhancement. I found the dynamic one misses the following, which corresponds to the date dialog pop-up:

<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
    ...

Why did the dynamic way miss to generate the codes above? How can I correct?

Answer 1

I found a solution myself. It is to change

    $page.trigger('create');

to

    $page.page();

But I have no idea why and the fundamental difference of these two. Help please!