I have this piece of code that has a jquery mobile button. When the button is clicked, a search box appears. The problem is that where the code is now, the input box is shown using regular HTML, and does not have the nice, sleek, rounded formatting.
If I move the code wrapped in the paragraph tags up to the salesitems div, it shows like it should, but then the button doesn't do anything.
This is my first venture into jquery mobile. Any help and guidance would be greatly appreciated. Thanks!
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="salesitems"></div>
<button id="additem" data-icon="plus" data-inline="true">Add Item</button>
<script type="text/javascript">
$('#additem').click(function () {
///alert("login");
//navigator.notification.vibrate(2500);
$('#salesitems').append('<p><label for="basic">Search Item:</label><input type="text" name="name" id="basic" value="" /></p>');
});
</script>
</div><!-- /content -->
<div data-role="footer">
<h1>Sales Entry</h1>
</div><!-- /footer -->
</div>
<div data-role="page" id="cusinfo" data-title="Sales Entry - Customer Info">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
Enter Customer Info
</div><!-- /content -->
<div data-role="footer">
<h1>Sales Entry</h1>
</div><!-- /footer -->
</div>
</body>