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

Best way too add a “Custom TimeSpan format Specifier” to support 10th's of minutes

c# .net parsing timespan

I have this absurd situation where i need to support a Custom TimeSpan Format with a unit of Tenths of minutes with Timespan.TryParse.

Log4Net configuring log level

log4net

How do I make Log4net only log Info level logs? Is that even possible? Can you only set a threshold?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.