加载 jQuery 对话框后运行函数

Run a function after loading jQuery dialog

提问by HTX9

This may be a simple question, but I can't quite get it to work. I'm using a jQuery dialog to display a form loaded from another page on my website. The user clicks on a link, which fires up the dialog. What I'm trying to do is to run a function after loading the HTML into the dialog. Here is my code to load the dialog:

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

I have a function myFunction() that I want to call when the HTML is loaded into the dialog. After looking around for quite a bit, I tried specifying the function in .load, like this:

我有一个函数 myFunction()，我想在将 HTML 加载到对话框中时调用它。环顾四周后，我尝试在 .load 中指定函数，如下所示：

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

I also tried using the open event, like this:

我也尝试使用 open 事件，如下所示：

open: myFunction(),

What am I doing wrong?

我究竟做错了什么？

回答by Peter

Solution #1:

解决方案#1：

.load(this.href, myFunction);

Solution #2:

解决方案#2：

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

Solution #3 (preffered):

解决方案#3（首选）：

open: myFunction,

Solution #4:

解决方案#4：

open: function(){
  myFunction();
}

---

---

Why is that?

这是为什么？

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

---

---

Your code should looks like:

您的代码应如下所示：

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

回答by Bruno Calza

None of the solutions worked for me. I guess it's because the opencallback isn't called when dialog is completed open. I had to use a setTimeoutto make it work.

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

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

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

It obviously depends on what's inside myFunction.

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

回答by Yang Kin

For jQuery UI - v1.11.4, "complete" in the code snippet below no longer works:

对于 jQuery UI - v1.11.4，下面代码片段中的“完成”不再有效：

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

The solution that is working for jQuery UI - v1.11.4. :

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

How to attach callback to jquery effect on dialog show?

如何在对话框显示中将回调附加到 jquery 效果？

As suggested by losnir, use $(this).parent().promise().done:

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

Hope this helps.

希望这可以帮助。

回答by Patoshi パトシ

I had an issue where I loaded a external page and I also wanted to run a function on the loaded page. Apparently using open: didn't work in the dialog method.

我有一个问题，我加载了一个外部页面，我还想在加载的页面上运行一个函数。显然使用 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'
});

The my_function_namehas to be without the parenthesis and just the name of the function itself to make it work. I'm not sure exactly how this works, but if you do figure it out let me know in the comments.

该my_function_name必须是没有括号和本身的功能，使其工作只是名字。我不确定这到底是如何工作的，但如果你弄清楚了，请在评论中告诉我。

回答by prince jose

You can also use focusevent which will trigger after the dialog box open and when it get focus.

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

Click here for documentation

单击此处获取文档