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

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&g开发者_如何学运维t;
</div>

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');
});

the create event might be firing, but where are you listening to it and responding?

for that means, you might need something like

$("#maincontent").bind('create', function() {
    //respond to the fired event
})

Run this line after you make all your insertions.

$('body').append(html).trigger('create');

Trick found by another SO user https://stackoverflow.com/users/456850/devin-dixon (Original Question).

Create a function inside iframe and include trigger('create') method in that function. Then call to that function outside from the iframe.

see this .