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

Question

这可能是一个简单的问题，但我无法完全解决它。我正在使用jQuery对话框来显示从我网站上的另一个页面加载的表单。用户点击链接，启动对话框。我想要做的是在将HTML加载到对话框中后运行一个函数。这里是我的代码加载对话：我希望在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的（）。环顾颇有几分后，我试图指定功能.load，就像这样：

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

我使用了开放式的事件，这样也试过：

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， “完成” 下面不再起作用：

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

是工作jQuery UI的解决方案 - v1.11.4。 ：

How to attach callback to jquery effect on dialog show?

至于建议的losnir，使用$（本）.parent（）的承诺（）来完成：

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