javascript - jQuery 模态窗口从我的表单中删除元素

Question

jQuery，当我用它创建一个包含表单元素的模态窗口时， 当我提交表单时，它会删除这些元素。

表格示例:

<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post"> 

    <label for="article_title" class="required">Title:</label> 

    <input class="formfield" id="article_title" name="article_title" value="" type="text"> 

    <label for="url" class="required">Url:</label> 

    <input class="formfield" id="url" name="url" value="" type="text"> 

    <div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content"  title="Add Photo"> 
        <label for="photo_title" class="optional">Photo title:</label> 
        <input class="formfield" id="photo_title" name="photo_title" value="" type="text">
        <label for="photot" class="optional">Photo thumb:</label> 
        <input type="file" name="photot" id="photot" class="formfield">
        <label for="photo_checkbox" class="optional">Include lighbox?</label> 
        <input name="photo_checkbox" value="0" type="hidden"> 
        <input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox"> 
        <label for="photo_big" class="optional">Photo:</label> 
        <input type="file" name="photo_big" id="photo_big" class="formfield"> 
    </div>
</form>

JS 的例子:

<script>
$(document).ready(function(){
    $("#add_photo").dialog({
        autoOpen: false,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

所以我在通过 firebug 进行检查时注意到的是，jquery 实际上删除了我在#add_photo 中的表单元素，并将它们放在 DOM 中的表单之外，所以即使在 html 中很难，模态对话框在我的表单中，在 DOM 中它不是不……

这就是我遇到问题的原因!

有人遇到过类似的问题吗？

有什么解决办法吗？!非常感谢!

Answer 1

我刚刚遇到了同样的问题。我通过添加另一个解决了它

<div id="beforesubmit" style="display:none"></div> 

在表单的末尾(但在内部)，然后您必须将其添加到 jQuery 中:

$("form").submit(function() {
    $("#add_photo").prependTo("#beforesubmit");
});

这将确保在提交表单之前，您的对话框 div 将被放回表单标签之间。感谢 arnorhs 我找到了这个解决方案。

干杯!