加载 jQuery 对话框后运行函数答案

【问题标题】：Run a function after loading jQuery dialog加载 jQuery 对话框后运行函数
【发布时间】：2012-09-09 07:26:28
【问题描述】：

这可能是一个简单的问题，但我无法让它发挥作用。我正在使用 jQuery 对话框来显示从我网站上的另一个页面加载的表单。用户单击一个链接，该链接将启动对话框。我要做的是在将 HTML 加载到对话框后运行一个函数。这是我加载对话框的代码：

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("#dialogBox").dialog({
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

我有一个函数 myFunction()，我想在 HTML 加载到对话框时调用它。找了好久，我尝试在.load中指定函数，如下所示：

.load(this.href, myFunction());

我也尝试过使用 open 事件，像这样：

open: myFunction(),

我做错了什么？

【问题讨论】：

open: myFunction，应该可以工作（没有括号，或者它会立即被调用，而不是在对话框打开时。）如果它没有控制台中的任何错误？

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

解决方案 #1：

.load(this.href, myFunction);

解决方案 #2：

.load(this.href, function(){
  myFunction();
});

解决方案 #3（首选）：

open: myFunction,

解决方案 #4：

open: function(){
  myFunction();
}

这是为什么呢？

var foo = myFunction(); // `foo` becomes your function return value
var bar  = myFunction; // `bar` becomes your function
bar();

您的代码应如下所示：

$("#dialogBox").load('http://example.com').dialog({
  title: $(this).attr("data-dialog-title"),
  close: function() { $(this).remove() },
  modal: true,
  open : myFunction // this should work...
})

【讨论】：

我已经尝试了所有四种解决方案，但仍然无法正常工作。控制台中也没有错误...我要调用的函数位于不同的 .js 文件中，但两者都在页面上引用。我不知道使用 myFunction() 和 myFunction 之间的区别。感谢您对此的澄清！
解决方案#3 对我不起作用.. 不知道为什么，也许是 jquery 版本？解决方案 #4 对我有用，使用以下构造： function() { myFunction();} ..Thanks！

【解决方案2】：

没有一个解决方案对我有用。我猜这是因为当对话框完成打开时没有调用open 回调。我必须使用setTimeout 才能使其工作。

$('#dialogBox').dialog('open');

setTimeout(function(){
    // myFunction();
},100);

这显然取决于 myFunction 里面的内容。

【讨论】：

我也不得不利用这段时间。我在打开对话框后添加了 zoomIn() 图像功能。

【解决方案3】：

对于 jQuery UI - v1.11.4，下面代码 sn-p 中的“完成”不再起作用：

show: {
    effect: 'clip',
    complete: function() {
        console.log('done');
    }
},

适用于 jQuery UI - v1.11.4 的解决方案。：

How to attach callback to jquery effect on dialog show?

按照losnir 的建议，使用 $(this).parent().promise().done:

$("#dialog").dialog({
show: {
    effect: "drop",
    direction: "up",
    duration: 1000
},
hide: {
    effect: "drop",
    direction: "down",
    duration: 1000
},
open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
},
close: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Closed");
    });
}
});

希望这会有所帮助。

【讨论】：

【解决方案4】：

我在加载外部页面时遇到了问题，我还想在加载的页面上运行一个函数。显然使用 open: 在对话框方法中不起作用。

jQuery("#pop-sav").load('/external/page', my_function_name );

jQuery("#pop-sav").dialog({
      resizable: false,
      width:'90%',
      autoReposition: true,
      center: true,
      position: 'top',
      dialogClass: 'pop-dialog pop-sort'
});

my_function_name 必须没有括号，只有函数本身的名称才能使其工作。我不确定这到底是如何工作的，但如果你弄清楚了，请在 cmets 中告诉我。

【讨论】：

【解决方案5】：

您还可以使用 focus 事件，该事件将在对话框打开并获得焦点时触发。

Click here for documentation

【讨论】：