Having an issue with my javascript function that inserts a form when a button is clicked. There's another button at the bottom of the form added by the function, but it's not inheriting the ui css even if I add the ui-button class. Any assistance would be greatly appreciated:
var addSite = function(){
var addForm ='<br><input id="site-db" class="manage-sites" type="text" placeholder="Domain" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Domain\'"><br>' +
'<input id="site-table" class="manage-sites" type="text" placeholder="Table" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Table\'"><br>' +
'<input id="site-IP" class="manage-sites" type="text" placeholder="IP Address" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'IP Address\'"><br>' +
'<input id="site-Server" class="manage-sites" type="text" placeholder="Server" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Server\'"><br>' +
'<input id="site-password" class="manage-sites" type="text" placeholder="Password" onfocus="this.placeholder=\'\'" onblur="this.placeholder = \'Password\'"><br>' +
'<button class="ui-button">Add to Datasites</button>';
$('#manage-sites').html(addForm);
}
Here is the relevant HTML section where these buttons render properly:
<div id="tabs-7">
<!-- Manage Data Sites -->
<h1>Manage Data Sites</h1>
<br><br>
<button id="add-site">Add</button>
<button id="delete-site">Delete</button>
<button id="view-sites">View</button>
<div id="manage-sites" style="margin-top:20px; width:100%">
</div>
<script>
$('#add-site').click(function(){
addSite();
})
</script>
</div>