Question

我有一个jquery ui对话框，通过ajax加载其内容：

$('#register').click(function(e) {
    var tag = $('<div></div>');
    $.ajax({
        url: 'signup.html',
        success: function(data) {
            tag.html(data).dialog({modal: true}).dialog('open');
        }
    });
    e.preventDefault();
    return false;
});

我在内容中有第二个脚本，当按下提交按钮时，该脚本应该关闭对话框

$(function() {
    $('form #submit').click(function(e) {
        $(this).parents('.ui-dialog').dialog('close');
        e.preventDefault();
        return false;
    });
});

当我点击提交按钮时，我收到错误：

未捕获错误：在初始化之前无法调用对话框上的方法;试图调用方法'关闭'

我错过了什么让我从通过ajax加载的内容中关闭对话框？

Answer 1

你必须在dialog('close') $（'。ui-dialog'）dialog('open') was called before. You're calling the function on $（'。ui-dialog ...'）`。<的元素上调用instead of。 / p>

您应该在代码中为tag元素定义id或class：

var tag = $('<div id="signup-id"></div>');

然后在点击处理程序中找到正确的元素，如下所示：

$(this).parents('.ui-dialog').children('#signup-id').dialog('close');

注意：如果您确定#signup-id永远不会包含$(this).children('#signup-id')元素，则可以直接在点击处理程序中找到signup.html，如signup-id标识。

Answer 2

在html中定义标记对话框

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

然后准备好文件：

$(document).ready(function(){
    $('#tag_dialog').dialog({
        modal:true,
        autoOpen:false,
        //you could give some other options such as width, height .....
    });
    $('#register').click(function(e) {
       $.ajax({
           url: 'signup.html',
           success: function(data) {
               $('#tag_dialog').html(data).dialog('open');
           }
       });
       e.preventDefault();
       return false;
   });
    $('form #submit').click(function(e) {
        $('#tag_dialog').dialog('close');
        e.preventDefault();
        return false;
    });
});

从AJAX加载的内容中关闭对话框

2 个答案: