jquery按钮未被样式化

Question

我有一个js函数，它可以在单击按钮时插入表单。在表单的底部是一个按钮，也是由函数添加的。即使我添加了ui按钮类，新按钮也不会继承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类。如果您检查这个演示页面上的这个演示页面按钮的源，就会注意到这些按钮还有以下类：

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被追加之后，在新创建的元素上调用jQuery UI的按钮()方法(我在这里使用了.find() )。

$('#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)
        	.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

在div中将manage-sites引用为ID，在生成的HTML中将其引用为类。如果manage-sites被定义为CSS中的ID (即#manage-sites而不是.manage-sites)，那么div将选择样式，但生成的HTML不会。

将不同的ID分配给您的div，并将manage-sites更改为类。