Possible infinite loop when adding dynamic content

Possible infinite loop when adding dynamic content

I want to add some dynamic content to a page after it has been shown.
This dynamic content included jQuery controls like expanders. Thus, I need to call ".page()" on the topmost element, I insert into the DOM.
In addition, I also listen to "pagecreate" where the creation of this dynamic content is queued.

However, each call to ".page()" results in firing "pagecreate" which results in new content generation and... finally an infinite loop.

Take the following code as an example:
  1. <div data-role="page" id="page">
  2.     <div data-role="header">
  3.         <h1>Header</h1>
  4.     </div>
  5.     <div data-role="content">
  6.         Content
  7.     </div>
  8. </div>
Script:
  1. $(document).ready(function() {
  2.     $("#page").live("pagecreate", function(){
  3.         console.log("pagecreate " + $(this).attr("data-url"));
  4.         setTimeout(function() {
  5.             var $expander = $("<div data-role='collapsible'><h2>Text</h2><div>Content</div></div>");
  6.             $("#page div:last").append($expander);
  7.             $expander.page(); 
  8.         }, 5000);
  9.     });
  10. });


Shouldn't "pagecreate" only be triggered for real pages and not every element?
Is there any workaround I can use?

Cheers
winSharp93