.trigger('create') method doesn't work with text input / iframe

Question

So I'm dynamically inserting text inputs into a jQuery mobile page that is inside an iframe. I can get it to insert correctly but the trigger('create') method doesn't apply any jqm styles, although it doesn't throw any javascript errors either.

Code on the page that inserts into iframe:

 $('.textarea').click(function() {
   $('#form').contents().find('#maincontent').append('<div data-role="fieldcontain"><label for="insert">Text Input:</label><input type="text" name="insert" id="insert" value="" /></div>');
   $('#form').contents().find('#maincontent').trigger('create');
});

And here is the boilerplate jqm maincontent (I've excluded header/footer for easier reading) that is inside the iframe (prior to inserting new text input)

<div data-role="content" id="maincontent"> 
 <div data-role="fieldcontain">
     <label for="name">Text Input:</label>
     <input type="text" name="name" id="name" value=""  />
 </div>
</div>

Answer 1

I make the following assumptions:

• #form is the ID of your iframe.
• The content from the iframe comes from the same domain.

Have you tried this:

$('.textarea').click(function() {    
  var iframecontent = $('#form').contents().find('#maincontent');
  var newstuff = $('<div data-role="fieldcontain"><label for="insert">Text Input:</label><input type="text" name="insert" id="insert" value="" /></div>');
  newstuff.appendTo(iframecontent).trigger('refresh');
});