Question

我有一个jQueryUI Dialog从外部网址加载一个表单，表单呈现正常并且发布正常但是保存或取消按钮似乎都没有关闭表单但是对话框关闭图标确实很好。

这是我的脚本产生对话框并应该处理按钮：

  $(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

Answer 2

在ajax回调函数中更改了

this，需要缓存到局部变量。

"Save": function () {
    var $this = $(this);
    $.post(href, $("form").serialize(), function () {
        $this.dialog("close");
    });
},

带有Ajax表单的jQueryUI对话框不会以$（this）.dialog（“close”）关闭;

2 个答案: