Question

所以我有一个表单，在表单中有一个div标签，当用户点击表单中的按钮时，该标签将填充另一个jsp页面作为Jquery对话框弹出窗口的一部分。但是，一旦弹出窗口出现并且我检查了html元素，div部分已移出表单之外，我不知道为什么会发生这种情况。当填充带有div部分的Jquery对话框弹出窗口时，div在表单中声明但移到它之外。任何人都知道为什么div标签的表现如此？

这是jsp部分：

<form:form ...> 
<div id="popUpDiv"></div>
<input type="button" onclick="openPopupWindow();"/> 
</form:form>

Javascript部分：

function openPopupWindow(){ 
    var url = '/.../popUp.jsp';
    var ajaxParameter = {}; 
    createPopUp('popUpDiv', 'Title',url, ajaxParameter, 500, 350);

和Jquery部分：

function createPopUp(divID, windowTitle,url, ajaxParameter, widths, heights){
var windowID = '#'+divID;

//delete the current open window if there is one.
jQuery(windowID).dialog('destroy');

jQuery(windowID).load(url, ajaxParameter);
jQuery(windowID).dialog({
    resizable: false,
    modal: true,
    //If this is enabled then the next time pop up page opens, it will resize every time a escape was pressed
    closeOnEscape: false,
    buttons:[
            { //Buttons for the form. (Submit the form and close)
                id: "Save",
                text: "Save",
                disabled: true,
                click: function() {
                    $("form").submit();
                    jQuery(windowID).html("");  //this workaround is necessary so the dialog opens subsequent times with the correct height
                    $( this ).dialog( "close" );
            }
            },
            {
                id: "Cancel",
                text: "Cancel",
                click: function() {
                    jQuery(windowID).html("");  //this workaround is necessary so the dialog opens subsequent times with the correct height
                    $( this ).dialog( "close" );
                }
            }
             ]
    ,
    autoOpen: false,
    height: heights,
    width: widths,
    show: 'blind',
    position: 'center',
    title: 'Blah'
});

$('.ui-widget-overlay').live("click", function() {
    //Close the dialog
    jQuery(windowID).html(""); //this workaround is necessary so the dialog opens subsequent times with the correct height
    $(windowID).dialog("close");
 });

//open the window
jQuery(windowID).dialog('open');

}

这是使用浏览器查看器最终发生的事情：

<form:form ...></form:form>
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-popUpDiv" style="left: 530px; top: -665px; width: 500px; height: auto; display: block; z-index: 1002; outline-width: 0px; outline-style: none; outline-color: invert;" jQuery17108924731123454443="9">
<div class="ui-dialog-content ui-widget-content" id="addCommentsPopUp" style="width: auto; height: 198px; min-height: 0px;" scrolltop="0" scrollleft="0" jQuery17108924731123454443="8"> </div></div>

我不知道为什么会这样。有没有人有更好的主意？

当JQuery填充Div标签时，Div标签移动到表单之外

0 个答案: