Javascript 将部分附加到对话框

好的，我有一个网站，我想要一个按钮来打开这个对话框。我正在试图弄清楚，只有当对话框打开时，如何将部分附加到此对话框中

该部分中存在JavaScript错误，因此在关闭对话框时需要删除该部分

$(document).ready(function () {
    $(function () {
        $("#dialog_box").dialog({
            autoOpen: false
        });
        $("#test_button").on("click", function () {
            $("#dialog_box").dialog("open");
        });
    });
});

只有当对话框打开时，我如何才能附加表单。。。并在对话框关闭时删除窗体

<script>
    $('#form_div').append('<%= render(:partial => 'payment_form')%>');
</script>

页面Html

<button id="test_button">Push Me</button>
<div class="main">
    <div id="dialog_box" title="Payment Details">
        <div id="form_div"></div>
    </div>
</div>

推我

我认为您必须使用对话框回调方法来控制对话框状态：

$(document).ready(function () {
    $(function () {
        $("#dialog_box").dialog({
            autoOpen: false,
            open: function( event, ui ) {
                console.log('Dialog opened');
            },
            close: function( event, ui ) {
                console.log('Dialog closed');
            }
        });
        $("#test_button").on("click", function () {
            $("#dialog_box").dialog("open");
        });
    });
});

您可以在此处找到方法和回调的完整列表：

干杯

$(document).ready(function () {
    $(function () {
        $("#dialog_box").dialog({
            autoOpen: false,
            open: function( event, ui ) {
                console.log('Dialog opened');
            },
            close: function( event, ui ) {
                console.log('Dialog closed');
            }
        });
        $("#test_button").on("click", function () {
            $("#dialog_box").dialog("open");
        });
    });
});