为什么Jquery对话框在$(this)上会持续崩溃？

Question

我在尝试弄清楚为什么下面的代码在对话框关闭或取消时会崩溃的过程中遇到了麻烦。它在对话框按钮函数中使用($this)的行上出现错误。

由于某种原因，如果我在addTaskDialog.html（AddTaskForm）中硬编码值，它就能正常工作。 我甚至已经硬编码了返回的ajax表单，它也能正常工作... 这个问题在所有浏览器中都存在。

  $(function ()
{

    /*
    *  Initializes AddTask Dialog (only needs to be done once!)
    */
    var $dialog = $('<div></div>').dialog(
{
    width: 580,
    height: 410,
    resizable: false,
    modal: true,
    autoOpen: false,
    title: 'Basic Dialog',
    buttons:
        {
            Cancel: function ()
            {
                $dialog.dialog('close');
            },
            'Create Task': function ()
            {

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


    /*
    * Click handler for dialog
    */
    $('#AddTask').click(function ()
    {

        /* Ajax request to load form into it */
        $.ajax({
            type: 'Get',
            url: '/Planner/Planner/LoadAddTaskForm',
            dataType: 'html',
            success: function (AddTaskForm)
            {
                $dialog.html(AddTaskForm);
                $dialog.dialog('open');
            }
        });
    });



});

});

- chobo

---

AddTaskForm 返回的是什么？ - Dr.Molle

一个包含HTML表单的局部视图。我认为它也包括一些额外的JavaScript文件。 - chobo

Answer 1

好的，我想我知道发生了什么。在你的成功回调函数中，你正在引用$(this)在AddTaskDialogOptions中，问题是在这个范围内$(this)不再指向$("#AddTask")，所以你需要设置一个变量来保持对$(this)的引用，像这样：

var that;
$('#AddTask').click(function ()
{
    that = $(this);
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var addTaskDialog = $('<div></div>');
            addTaskDialog.dialog(AddTaskDialogOptions);
            addTaskDialog.html(AddTaskForm);
            addTaskDialog.dialog('open');
        }
    });
});
var AddTaskDialogOptions = {
    width: 580,
    height: 410,
    resizable: false,
    modal: true,
    autoOpen: false,
    title: 'Basic Dialog',
    buttons:
        {
            Cancel: function ()
            {
                that.dialog('close');
            },
            'Create Task': function ()
            {

            }
        },
    close: function ()
    {
        that.dialog('destroy').remove();
    }
}

- Adrian

---

我不再收到错误提示，但是取消按钮没有反应，如果我点击 x 按钮，则会关闭对话框并删除一些我想保留的其他 HTML。 - chobo

你能否在AddTaskDialogOptions被使用的地方发帖（可能在$(document).ready()中）？我认为$(this)引用可能指向不同的资源。 - Adrian

您的问题中的当前JavaScript已经发生了重大变化。例如，现在没有AddTaskDialogOptions（这是原始问题的根源）。您能否解释一下这个变化，以便我更好地理解代码？ - Adrian

抱歉，我尝试了很多不同的方法，很难保持更新。 - chobo

没问题。你当前的JavaScript代码出现了什么错误？ - Adrian

Answer 2

我想通了。我不确定从哪里得到这段代码，但它引起了问题，所以我把它拿掉了，现在一切都正常工作。

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

- chobo