Question

这可能是一个简单的问题，但我无法让它发挥作用。我正在使用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(),

我做错了什么？

Answer 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...
})

Answer 2

这些解决方案都不适合我。我猜是因为当对话框完成打开时，不会调用open回调。我不得不使用setTimeout来使其发挥作用。

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

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

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

Answer 3

对于jQuery UI - v1.11.4，＆＃34;完成＆＃34;在下面的代码段中不再有效：

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");
    });
}
});

希望这有帮助。

Answer 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 必须没有括号，只有函数本身的名称才能使其正常工作。我不确定这是如何工作的，但是如果你确实搞清楚了，请在评论中告诉我。

Answer 5

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

Click here for documentation

加载jQuery对话框后运行一个函数

5 个答案: