I have created a simple button and a corresponding popup as shown in the samples on  http://view.jquerymobile.com/1.3.0/docs/widgets/popup/ using the latest version of jQuery mobile and PhoneGap. Everything worked fine so far.

As a next step I like to create the buttons and corresponding popups dynamically. I'm doing so in the following code block before page becomes visible: 

1. $(document).one("pagebeforechange", function () {
2.       ...
3. }) 

After adding the button and the popup to my page I can only view them with a wrong formatting and no user interaction. The content of the popup is always visible too. I've used (as in the static context):

1. ("#element").html(
2.   "<a id=\"popupButton\" href=\"#popupImage\" data-rel=\"popup\" data-role=\"button\" data-inline=\"true\" data-transition=\"pop\">" +
3.   "    <img src=\"img.jpg" />" +
4.   "</a>" +
5.   "<div data-role=\"popup\" id=\"popupImage\">" +
6.   "    <img src=\"img.jpg\"/>" +
7.   "</div>");

I've noticed that some elements of the page are not generated, mainly the following tag in the page is missing: 

1. <div id="popupImage-screen" class="ui-screen-hidden" ... > 

In a static environment a lot of attributes are added to both the button and the popup. Doing it dynamically the attributes are missing.

I've tried to call the "popup()" function after creating the popup and tried some similar functions of the button, but it did not help:

1. $("#popupImage").popup(); 

Does anybody has a clue whats wrong here?

Thanks a lot in advance!

Steffen

[moderator moved to jQuery Mobile]