javascript jQuery Append/Add Hidden div 到 jQuery Dialog
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16479398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Append/Add Hidden div to jQuery Dialog
提问by Oam Psy
I'm trying to append/add a div element within my HTML file to a dialog box (which currently has some buttons). The div is hidden on page load with a CSS class 'hide'
我正在尝试将 HTML 文件中的 div 元素附加/添加到对话框（当前有一些按钮）。div 在页面加载时使用 CSS 类“隐藏”隐藏
HTML DIV:
HTML DIV：
<section>
<div id="deliveryMethod" title="Delivery Method" class="hide">
<p>Please select delivery method and special requirements.</p>
<ul>
<li>
<label>Method:</label>
</li>
<li>
<div>
<select for="deliveryService">
<option value="">Please select...</option>
<option value="FedEx">FedEx</option>
<option value="UPS">UPS</option>
</select>
</div>
</li>
<li>
<label>Special Requirements:</label>
</li>
<li>
<textarea id="specialRequirements" type="text" value="" maxlength="220"></textarea>
</li>
</ul>
</div>
</section>
CSS for class = hide
类的 CSS = 隐藏
.hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
jQuery when a buttion is clicked, below function i called:
单击按钮时的 jQuery，在我调用的函数下方：
function deliveryServiceClick() {
$("#dialogDiv").dialog("open");
if ($('#dialogDiv').length == 0) {
$('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');
dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Process",
class : 'large',
click : function() {
//
}
},
{
text : "Cancel",
class : 'large',
click : function() {
$(this).dialog('close');
}
} ]
});
}
As you can see, i have tried to append/show my hidden div using:
如您所见，我尝试使用以下方法附加/显示隐藏的 div：
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");
The buttons defined in my jQuery would then appear below the div.
在我的 jQuery 中定义的按钮将出现在 div 下方。
Any help would be appreciated.
任何帮助，将不胜感激。
Thanks
谢谢
回答by Arun P Johny
Try
尝试
function deliveryServiceClick() {
var dialogDiv = $('#dialogDiv');
$("#dialogDiv").dialog("open");
if (dialogDiv.length == 0) {
dialogDiv = $("<div id='dialogDiv'><div/>").appendTo('body');
$('#deliveryMethod').appendTo(dialogDiv).removeClass('hide')
dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Process",
class : 'large',
click : function() {
//
}
},
{
text : "Cancel",
class : 'large',
click : function() {
$(this).dialog('close');
}
} ]
});
}else{
dialogDiv.dialog("open");
}
}
Demo: Fiddle
演示：小提琴
