问题
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:
<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
.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:
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:
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");
The buttons defined in my jQuery would then appear below the div.
Any help would be appreciated.
Thanks
回答1:
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
来源:https://stackoverflow.com/questions/16479398/jquery-append-add-hidden-div-to-jquery-dialog