javascript - 带有 Ajax 表单的 jQueryUI 对话框不会用 $(this).dialog ("close"关闭；

Question

我有一个 jQueryUI 对话框从外部 url 加载一个表单，该表单呈现正常并且发布正常但是保存或取消按钮似乎都没有关闭表单但是对话框关闭图标完成它的工作就好了。

这是我生成对话框并应处理按钮的脚本:

  $(function () {
      $('a.modal').on('click', function() {
          var href = $(this).attr('href');
          $("#modalAdd").html("")
              .dialog({
                  title: $(this).attr("title"),
                  width: 400,
                  height: 300,
                  buttons: {
                      "Save": function() {
                          $.post(href,
                              $("form").serialize(),
                              function() {
                                  $(this).dialog("close");
                              });
                      },
                      Cancel: function() {
                          $(this).dialog("close");
                      }
                  }
              })
              .load(href, function() {
                  $(this).dialog("open");
              });

          return false;
      });
  });

最终的解决方案是在对话框声明的范围之外声明变量，如下所示:

 $(function () {
      $('a.modal').on('click', function() {
          var href = $(this).attr('href');
          var modal = $("#modalAdd");
          modal.html("")
              .dialog({
                  title: $(this).attr("title"),
                  width: 400,
                  height: 300,
                  buttons: {
                      "Save": function() {
                          $.post(href,
                              $("form").serialize(),
                              function() {
                                  modal.dialog("close");
                              });
                      },
                      Cancel: function() {
                          modal.dialog("close");
                      }
                  }
              })
              .load(href, function() {
                  **modal**.dialog("open");
              });

          return false;
      });
  });

Answer 1

这是因为可变范围，一旦您启动$.post的回调函数打电话，this不再是对话框。尝试调用 $("#modalAdd").dialog('close');相反。

如果您不介意扩展您的 $.post()和 $.load()调用，您可以设置 this 的上下文使用完整的 $.ajax() 到某个元素方法。 See the "context" option in the docs .