Question

我需要弹出一个jQuery UI对话框，并显示一个基本表单，其中还包含一个外部javascript文件。

模式会弹出，但不会加载任何脚本内容。不知道为什么。如果我直接进入模态加载的页面，它可以正常工作。

模态内容：

<link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/>

<input id="mrtgCal" type ="text" value="1,Arial,600" style="display:none" />

<script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script>

<script type="text/javascript">mrtgCalcinit();</script>

模态通话：

$(function(){
        $('.modal-popup a, .email-button a').each(function() {
            var $link = $(this);
            var $dialog = $('<div></div>')
                .load($link.attr('href') + ' #region-content')
                .dialog({
                    autoOpen: false,
                    width: 600,
                    draggable: false,
                    resizable: false,
                    modal: true,
                    show: "fade",
                    hide: "fade",
                    closeText: 'X'

                });
            $link.click(function(){
                $dialog.dialog('open');
                return false;
            });

        });
    });

Answer 1

由于您调用.load()的方式，脚本未运行。在URL之后使用选择器时，库不会运行嵌入式脚本。我的意思是将' #region-content'添加到“href”值的末尾。

为什么呢？我不完全知道;我怀疑它与jQuery不知道嵌入的<script>主体是否依赖<head>（或其他地方）中的脚本工作这一事实有关。

Answer 2

如前所述，load不会加载脚本（请阅读“脚本执行”部分）。但是，扩展对话框不是必要的，您可以使用.delegate()，.on()甚至非常使用名为liveplugin的插件来管理加载到对话框中的动态内容。

Answer 3

最好的变体是编写自定义jquery ui小部件，使用您的功能扩展jquery ui对话框。

通过jQuery UI Dialog加载嵌入式脚本？

3 个答案: