jquery ui按钮没有风格

Question

我有一个js函数插入一个表单响应按钮单击。在表单的底部还有一个按钮，该按钮也被该功能添加。不知何故，即使添加了ui-button类，新按钮也不会继承ui css。任何帮助将不胜感激：

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); 
} 

相关（？）HTML。这些按钮呈现正确：

<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> 

Answer 1

按钮的jQuery UI样式需要的不仅仅是ui-button类。如果你查看源代码的jQuery的按钮上this demo page，你会发现，按键也有以下类：

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

你可以解决这个两种方式：

1 - 手动添加类：<button class="ui-button ui-widget ui-state-default ui-corner-all">blah</button>

2 - 在添加了html后，在新创建的元素（我在这里使用.find()）调用jQuery UI的button（）方法。

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

---

全部演示

$(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 to Datasites</button>'; 
 
     $('#manage-sites').html(addForm) 
 
     \t .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>

Answer 2

你引用manage-sites在你的DIV一个ID，并在您生成的HTML类。如果manage-sites在您的CSS中被定义为ID（即#manage-sites而不是.manage-sites），那么您的div将选取样式，但生成的HTML不会。

为您的div指定一个不同的ID，并将manage-sites更改为一个类。