Simplemodal ajax 调用答案

【问题标题】：Simplemodal ajax callSimplemodal ajax 调用
【发布时间】：2009-08-08 08:02:12
【问题描述】：

我正在使用此代码在我的应用程序中实现 Simplemodal：

$(".dialog-link").live('click', function(e) {
 e.preventDefault();
 $.get($(this).attr('href'),function(data) {
  $.modal(data, {onOpen: open, position: ['10%','30%']});
 );
});

（仅供参考：onOpen 回调只是设置了一些高度）

ajax 调用返回的文档（包含在数据中）有一些 jquery 调用 datepicker 等。但是当我的对话框显示日期选择器不起作用。

我知道我可以从 onShow 回调中打开日期选择器，但理想的做法是调用数据中包含的函数，因为每个对话框都可以有不同的 jquery 调用。

有没有办法举例

onShow: function(dialog) { dialog.data.my_function(); }

谢谢，迈克尔

【问题讨论】：

标签： jquery simplemodal

【解决方案1】：

正如 DOM 检查可能显示的那样（firebug 总是很方便...），模态对话框将外部文档加载到 div 中，去除了 <html> 和 <head> 标记。它似乎也导入到加载文档中定义的主窗口对象和函数的范围内。

因此，像在另一个窗口或框架（ dialog.data.my_function ）范围内一样调用函数将不起作用。

对我有用的是直接将外部函数绑定到 onShow 事件。

主文档：

    <script type="text/javascript">
        $("a.dialog-link").live('click', function(e) {
           e.preventDefault(); 
           $.get($(this).attr('href'),function(data) {
           $.modal(data, {position: ['10%','30%'], onShow: function(dialog){ 
                                                           external_function()
           }});
         });
    </script>

外部文档（加载到模态框：）

<html><head><title>bla bla </title>
   <script type="text/javascript">
      function external_function(){$("#external_content").text("UPDATED!")};
   </script>
</head>
<body>
 <div id="external_content"> .... </div>
</body>
</html>

希望这会有所帮助:)

【讨论】：

【解决方案2】：

扩展@And 答案。由于 live() 在 jQuery 1.9 中被移除：

$(document).on("click","a.dialog-link",function(e) {
    e.preventDefault();
    $.get($(this).attr("href"),function(data) {
        $.modal(data, {position: ["10%','30%"], onShow: function(dialog){
            external_function()
        }});
    });
});

【讨论】：