jquery mobile trigger('create') method doe

问题:

When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works

please go to this link 'here' on jsfiddle and click on "load mobile view"

javascript code

$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");

$("#load_mobileview").click(function(){
    var content = ' <form class="fbm_contactform">\
    <div>Contact Us</div>\
    <div data-role="fieldcontain"><label for="name" >Name</label>\
    <input name="name" type="text" class="m-field" /></div>\
    <div data-role="fieldcontain"><label for="email">Email</label>\
    <input name="email" type="text" class="m-field" /></div>\
    <div data-role="fieldcontain"><label >Message</label>\
    <input name="message" type="text" class="m-field" /></div>\
    <input name="submitButton" type="submit" class="m-field" value="Send Message"  /></div>\
    </form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");      
});

html code

<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>

回答1:

iFrame contents should not be "easily" accessible, so to me this is correct behavior.

If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.

So if you have an iframe, include JQM inside the iFrame and everything should be allright.

回答2:

I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.

in iFrame

<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>

parent

window.frames[0].trigerCreate();