javascript - jquery ui button not being styled -

i have js function inserts form in response button click. @ bottom of form button added function. somehow new button not inherit ui css if add ui-button class. 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 datasites</button>'; $('#manage-sites').html(addform); } 

relevant(?) html. 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> 

jquery ui styling button requires more ui-button class. if inspect source jquery buttons on this demo page you'll notice buttons have following classes:

ui-widget ui-state-default ui-corner-all 

you tackle 2 ways:

1 - add classes manually: <button class="ui-button ui-widget ui-state-default ui-corner-all">blah</button>

2 - after html has been appended, call jquery ui's button() method on newly created element (i used .find() here).

$('#manage-sites').html(addform)     .find('.ui-button').button(); 

---

full demo

$(function(){      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 datasites</button>';          $('#manage-sites').html(addform)          	.find('.ui-button').button();      };            $('#add-site').click(function(){          addsite();       });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script>  <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>  <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>