Question

我在将动态内容加载到新的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>

Answer 1

你必须在初始对话框（）设置中定义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

p.s。：您正在使用$('#content')，但在html中定义了class="content"

Answer 2

您的内容div包含课程，而不是ID。下面的代码可以解决问题。

$( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('.content').load('http://www.google.com');
                    }
                }).dialog("open");
            });

Answer 3

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

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

$( "#content" ).dialog( 'open' );

Answer 4

到目前为止，除了提供的答案之外，我想提一下，提供的示例不起作用＆＃34;开箱即用＆＃34;因为他们正在尝试加载Google页面。我在过去半小时内偶然发现了这个问题，直到我在JQuery documentation:

中读到

由于浏览器安全限制，大多数＆＃34; Ajax＆＃34;请求是主题同源政策;请求无法成功检索来自不同域，子域，端口或协议的数据。

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

在JQuery对话框中加载动态内容

4 个答案: