Jquery ui jqueryui对话框+；外部内容w/AJAX不工作

我的目标：单击链接后，我想将外部页面（带有图像上传表单）加载到jQuery UI对话框中，并以AJAX风格提交

我的问题：对话框可以很好地加载外部PHP页面，我可以通过AJAX提交表单——使用此处显示的jQuery表单插件——但由于某些原因，AJAX提交在对话框内无法工作，只有在我直接查看页面时才可以。它只是加载页面本身，就好像JS被关闭了一样

以下是显示该对话框的父页面：

port_edit.php（标题）

函数刷新窗口（）{
位置。重新加载（true）；
}
$（文档）.ready（函数（）{
$（“#图库显示”）。每个（函数（）{
var$link=$（此）；
变量$dialog=$（''）
.load（$link.attr（'href'））
.对话({
自动打开：错误，
标题：“画廊展示”，
宽度：280，
身高：280，
关闭：刷新窗口，
可调整大小：false
});
$link.click（函数（）{
$dialog.dialog（'open'）；
返回false；
});
});
});

port_edit.php（链接）

和加载到对话框中的外部文档：

image_upload.php

//等待加载DOM
$（文档）.ready（函数（）{
//将处理程序附加到表单的提交事件
$（“#图像上载”）.submit（函数（）{
//提交表格
$（this.ajaxSubmit（）；
返回false；
});        }); 

---

救命

是否尝试将image\u upload.php中document.ready（）中的代码移动到port\u edit.php中的相同函数中，然后重试？我不确定这是否有效，但你可以试试

如下图所示：

port_edit.php

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
    location.reload(true);
}

$(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>').load($link.attr('href')).dialog({
            autoOpen: false,
            title: 'Gallery Display',
            width: 280,
            height: 280,
            close: refreshWindow,
            resizable: false

        });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });

    // attach handler to form's submit event
    $('#image-upload').submit(function() {
        // submit the form
        $(this).ajaxSubmit();
        return false;
    });

});
</script>
<a href="image_upload.php" id="gallery-display">Modify</a>

<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
    <input type="file" name="file" id="file" />
    <input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
    <br />
</form>

函数刷新窗口（）{
位置。重新加载（true）；
}
$（文档）.ready（函数（）{
$（“#图库显示”）。每个（函数（）{
var$link=$（此）；
var$dialog=$（''）.load（$link.attr（'href'））.dialog({
自动打开：错误，
标题：“画廊展示”，
宽度：280，
身高：280，
关闭：刷新窗口，
可调整大小：false
});
$link.click（函数（）{
$dialog.dialog（'open'）；
返回false；
});
});
//将处理程序附加到表单的提交事件
$（“#图像上载”）.submit（函数（）{
//提交表格
$（this.ajaxSubmit（）；
返回false；
});
});

image\u upload.php

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
    location.reload(true);
}

$(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>').load($link.attr('href')).dialog({
            autoOpen: false,
            title: 'Gallery Display',
            width: 280,
            height: 280,
            close: refreshWindow,
            resizable: false

        });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });

    // attach handler to form's submit event
    $('#image-upload').submit(function() {
        // submit the form
        $(this).ajaxSubmit();
        return false;
    });

});
</script>
<a href="image_upload.php" id="gallery-display">Modify</a>

<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
    <input type="file" name="file" id="file" />
    <input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
    <br />
</form>

我以前确实尝试过这个方法，虽然它不再像链接一样进入image\u upload\u action.php（这很好），但在提交成功后，我似乎无法让对话框关闭、发出警报或进行任何操作。您需要显式的

$dialog.dialog（'close'）

来关闭您打开的对话框。

<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
    <input type="file" name="file" id="file" />
    <input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
    <br />
</form>