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更改爲一個類。