textbox style following jquery mobile

i having problem in creating textbox using jquery that is implemented in webview. here is the code

<html>

<head>
    <title>jQuery Mobile List Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
    <script type="text/javascript">
        var counter = 1;
        $('#AddQuestion').live('pagecreate', function() {
            $('#button').click(function() {
                $('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
                $('#TextBoxesGroup').textinput();
                if (counter > 4) {
                    document.getElementById("button").style.display = 'none';
                }
                counter++;
            });
        });
    </script>
</head>

<body>
    <div data-role="page" id="AddQuestion">
        <div data-role="header" data-position="fixed">
                <h1>AddQuestion</h1> 
        </div>
        <div data-role="content">
            <form name="newdocument">
                <div data-role="listview" id="TextBoxesGroup"></div>
                <input type="button" value="Add Option" id="button">
            </form>
        </div>
    </div>
</body>
</html>

i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?

Answers


You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.

<script type="text/javascript">
    var counter = 1;
    $('#AddQuestion').live('pagecreate', function() {
        $('#button').click(function() {
            $('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
            $('#TextBoxesGroup').textinput();
            if (counter > 4) {
                document.getElementById("button").style.display = 'none';
            }
            $('#AddQuestion').trigger('create');
            counter++;
        });
    });
</script>

Need Your Help

Are there any considerations needed to be taken running your .net program on x64 vs x86?

.net x86 64bit

I believe the architecture type (x86 vs x64) is abstracted away for you when making .Net programs, but are there any other considerations that can cause problems?

<applet> vs <object>

java html safari applet

Just out of curiosity, between &lt;applet&gt; vs &lt;object&gt; for a Java applet, which one should I use? I know that &lt;applet&gt; is deprecated, however Sun still recommends the use of &lt;appl...