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

您在div中引用manage-sites作为ID，并在生成的HTML中引用类。如果您的CSS中manage-sites被定义为ID（即#manage-sites而不是.manage-sites），则您的div会选择该样式，但生成的HTML不会。

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

Answer 2

按钮的jQuery UI样式需要的不仅仅是ui-button类。如果您检查this demo page上jQuery按钮的源代码，您会注意到这些按钮还包含以下类：

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的button（）方法（我在这里使用了.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>

jquery ui按钮没有被设计

2 个答案: