1

我在将动态内容加载到新的 JQuery 对话框时遇到问题。当我单击按钮时，没有任何反应。

我的代码如下：

    <script  src="jquery-ui.min.js"></script>

    <script>
        //$('#dialog').dialog({ dialogClass: 'noTitleStuff' }); ---> CSS

         $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                height:$(window).height() - 50,
                width:$(window).width() - 50,
                    show: {
                    effect: "blind",
                    duration: 400,
                    },

                    hide: {
                    effect: "explode",
                    duration: 400
                    }
            });

            $( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('#content').load('http://www.google.com');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="dialog">
        <div class="content"></div>
    </div>
    <button id="opener">Open Dialog</button>
</body>

4

4 回答 4

3

您必须在初始 dialog() 设置中定义 open 函数：

$("#dialog").dialog({
    autoOpen: false,
    height: $(window).height() - 50,
    width: $(window).width() - 50,
    show: {
        effect: "blind",
        duration: 400,
    },
    hide: {
        effect: "explode",
        duration: 400
    },
    open: function (event, ui) {
        $('#content').load('http://www.google.com');
    }
});

并像这样调用它：

$("#opener").click(function () {
    $("#dialog").dialog('open');
});

jsfiddle

ps：您正在使用$('#content')但在您定义的html中class="content"

于 2013-02-28T08:11:04.757 回答
1

您的内容 div 有类，而不是 id。下面的代码可以解决问题。

$( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('.content').load('http://www.google.com');
                    }
                }).dialog("open");
            });
于 2013-02-28T08:10:09.027 回答
1

您可以做的只是在该 DOM 中加载 html 并创建对话框。

$('#content').load('http://www.google.com');

$( "#content" ).dialog( 'open' );
于 2013-02-28T08:10:30.143 回答
0

除了到目前为止提供的答案之外，我想提一下，提供的示例无法“开箱即用”，因为它们正在尝试加载 Google 页面。我在过去半个小时里偶然发现了这个问题，直到我阅读了JQuery 文档：

由于浏览器安全限制，大部分“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域、端口或协议成功检索数据。

以防万一其他人遇到这个问题并且想知道为什么提供的示例和 JSFiddles 没有按预期工作。

于 2014-09-10T09:57:22.220 回答