14

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

我究竟做错了什么？

4

5 回答 5

34

解决方案#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...
})
于 2012-09-09T07:33:34.967 回答
4

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

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

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

这显然取决于里面的东西myFunction。

于 2014-11-10T13:55:28.127 回答
2

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

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

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

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

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

希望这可以帮助。

于 2015-11-25T08:56:47.347 回答
0

我有一个问题，我加载了一个外部页面，我还想在加载的页面上运行一个函数。显然使用 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必须没有括号，只有函数本身的名称才能使其工作。我不确定这到底是如何工作的，但如果你弄清楚了，请在评论中告诉我。

于 2016-03-30T03:36:27.597 回答
0

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

单击此处获取文档

于 2017-05-12T03:23:29.540 回答