Question

我正在使用jQuery 1.7.2和jQuery UI 1.8.20。我的一个页面，我有一个简单的对话框，其中包含一个表单：

    <div id="dialog-addArtToCompetition" title="Add Art to Competition">
    <form id="addToCompetition" name="addToCompetition"
        action="${competition_new_base}" method="post">
        <fieldset>
            <input type="hidden" name="artPieceId" id="artPieceIdHidden" value="${artPiece.id}" />
            <label for="artCategoryId">Category: </label> 
            <select name="artCategoryId" id="artCategoryIdSelect"
                multiple="false" style="width: 200px; height: 50px;">
            </select> <br />
            <label for="competitionPrice">Price: </label>
            <select name="competitionPrice" id="competitionPriceSelect"
                multiple="false" style="width: 200px; height: 50px;">
            </select>
        </fieldset>
    </form>
</div>

然后我使用以下内容注册对话框：

            $('#dialog-addArtToCompetition').dialog({
            autoOpen:   false,
            width:      400,
            height:     500,
            modal:      true,
            buttons:    {
                "Add":  function() {
                    $('#addToCompetition').ajaxSubmit({
                        accept:         'application/json',
                        dataType:       'json',
                        //beforeSubmit: showRequest,  // pre-submit callback 
                        success:        function(comp, statusText, xhr, $form) {
                            alert("Art added");
                            $(this).dialog( "close" );
                        },
                        error:          function(xhr, ajaxOptions, thrownError) {
                            alert("Some error occured");
                            $(this).dialog( "close" );
                        },
                        resetForm:      true
                    }); 

                    $(this).dialog( "close" );
                },
                "Cancel":   function() {
                    $(this).dialog( "close" );
                }
            },
            close:      function() {}
        });
    });

但是，当我打开对话框时，第二个元素丢失了。我仔细检查了生成的HTML购买查看源代码，原始HTML文件确实缺少选择，但是当我使用Chrome的开发工具查看它时，Elements标签中缺少它。而且，是的，我正在查看正确的DIV，因为我知道jQuery会在创建时将对话框移出到正文中。

为什么jQuery会删除我的表单元素？

Answer 1

似乎有一些奇怪的事情正在进行空选。我一做出以下更改

<div title="Add Art to Competition" id="dialog-addArtToCompetition">
<form method="post" action="/ArtSite/competitions/new" name="addToCompetition" id="addToCompetition">
    <fieldset>
        <input value="" id="artPieceIdHidden" name="artPieceId" type="hidden"/>
        <label for="artCategoryId">Category: </label>
        <select style="width: 200px; height: 50px;" multiple="false" id="artCategoryIdSelect" name="artCategoryId"><!-- empty --></select><br/>
        <label for="competitionPrice">Price: </label>
        <select style="width: 200px; height: 50px;"  multiple="false" id="competitionPriceSelect" name="competitionPrice"><!-- empty --></select>
    </fieldset>
</form>

这一切似乎都有效。

应用jQuery-UI对话框后，第二个表单选择消失

1 个答案: