Question

我有一个jQuery对话框，我在其中显示一个表单。表单中有一个“picture_fields”div，如果用户点击“添加更多图片”，我会添加新字段，即表单显示一个“图片”文件字段，但用户可以添加更多点击“添加更多图片“链接。

第一次显示包含其中表单的对话框时，这一切都很有效，但如果关闭对话框，然后重新打开它，则追加功能不再起作用。您可以单击该链接，但不添加任何文件字段。我调试了它，它正在调用正确的函数，包括append，但它不会像我期望的那样附加它。

这是我的（愚蠢的）功能，处理“添加更多图片”点击：

/**
* Add Picture Field Functionality
*/
    $('form a.add_child').live('click', function() {
        $("#picture_fields").append('<p> File Field Here </p>');
        return false;
    });

这是我的对话处理程序：

/**
* New Object Button opening modal Dialog
*/
    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
                autoOpen: false,
            show: {effect: 'blind'},
            hide: {effect: 'blind'},
        });

    $dialog.dialog('open');

    // prevent the default action, e.g., following a link
    return false;
    });
});

用户单击“新建对象”按钮（使用类“dialog_form_link”），该按钮将新对象表单打开到jquery对话框中。在此对话框中，然后单击“添加图片”链接（使用类“add_child”）。第一次打开对话框时工作得很好，之后再也无法工作。它只在我重新加载整个网页后才重新开始工作，但只有一次。

== UPDATE == 我试图添加一个像建议的关闭选项：

$('.dialog_form_link').live('click', function() {
    var $dialog = $('<div></div>')
        .appendTo('body')
        .load($(this).attr('href') + ' .entry_form')
        .dialog({
            title: $(this).text(),
            modal: true,
        autoOpen: false,
            width: 900,
            height: '900',
            position: 'center',
            show: {effect: 'fade', duration: 300},
            hide: {effect: 'blind', duration: 500},
            close: function(ev, ui) { $(this).destroy(); alert("Closed"); }
        });

我也试过close: function(ev, ui) { $(this).close(); }。这两个都在对话框结束时被调用（我点击X并看到警报）但在此之后我无法打开对话框。我得到灰色叠加但没有对话框。我相信这是一个常见的初学者错误（男孩，我！），jquery对话框没有正确初始化，所以也许我在这里做了一些完全错误的事情？我相信autoOpen选项也与此有关，所以我启用和禁用了，关闭和销毁，但同样，没有骰子。我要看一下this answer，但与此同时，如果有人有任何其他建议，我将非常感激。

Answer 1

粗略猜测 - 我知道其他人在jQuery UI对话框中没有使用Form标签时遇到问题。我想当你调用dialog() fn时，它可能导致整个DIV被移到form标签之外。这意味着您的选择器form a.add_child将无法工作，因为a.add_child可能不再在表单中。

请参阅this answer以获取将对话框div放回正确位置的代码。

Answer 2

好吧，我想通了......

我在关闭选项中添加了一个函数，它实际上删除了对话框所附加的DIV，如下所示：

close：function（ev，ui）{$（'div.dialog'）。remove（）; }

我实际上认为我并没有真正做到这一点100％正确（我是否必须将对话框附加到DIV？），但这样可行，所以我坚持使用它直到我变得更加精通： - ）

最终代码：

    $('.dialog_form_link').live('click', function() {
        var $dialog = $('<div class="dialog"></div>')
            .appendTo('body')
            .load($(this).attr('href') + ' .entry_form')
            .dialog({
                title: $(this).text(),
                modal: true,
//              autoOpen: false,
                width: 900,
                height: '900',
                position: 'center',
                show: {effect: 'fade', duration: 300},
                hide: {effect: 'blind', duration: 500},
                close: function(ev, ui) { $('div.dialog').remove(); }
            });

//      $dialog.dialog('open');

        // prevent the default action, e.g., following a link
        return false;
    });

请注意，我还选择了autoOpen功能，因为在这种情况下，这就是我想要的。

Answer 3

您可以将“添加图片”链接改为对话框按钮吗？我有一个对话框，我在其中执行一些操作，然后将选项附加到选择列表。它对我有用。

                buttons:
                {
                    'Add': function () {
                        ... 
                        $("#picture_fields").append('<p> File Field Here </p>');

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

jQuery在jQuery对话框中添加了奇怪的行为

3 个答案: