jQuery Dialog 需要两次点击才能打开答案

【问题标题】：jQuery Dialog requires two clicks to openjQuery Dialog 需要两次点击才能打开
【发布时间】：2016-09-12 10:57:45
【问题描述】：

我有一个 jQuery 对话框，当我单击类 .currentDay 时需要打开它，这有效，但仅在第二次单击时才有效。我在想我在第一次单击时初始化模态，然后在第二次单击时打开它。

我尝试了不同的方法来让它初始化和打开，但我似乎无法让它工作。希望这里有人可以帮我一把。这是我目前拥有的 JavaScript。

        $('.currentDay').click(function () {
            var id = event.target.id;
            var url = '/Home/CalenderPartial/' + id;
            var dialog = $('<div style="display:none"></div>').appendTo('body');
            dialog.load(url, {},
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({
                        autoOpen: true,
                        closeText: "",
                        width: $(window).width() - 300,
                        height: $(window).height() - 100,
                        close: function (event, ui) {
                            dialog.remove();
                        }
                    });
                });
            return false;
        });

它也会抛出一个错误：Uncaught TypeError: dialog.dialog is not a function, but it still work.

【问题讨论】：

标签： javascript jquery jquery-ui modal-dialog

【解决方案1】：

您是否尝试阻止默认锚点行为？

 $('.currentDay').click(function ( e ) {
        e.preventDefault();
        alert('test');
 });

所有功劳归功于 github 上的早期帖子：Source

【讨论】：

它没有改变任何东西，仍然需要点击两次。

【解决方案2】：

它对我来说工作正常...请查看工作示例

$('.currentDay').click(function () {
            var id = event.target.id;
            var url = '/Home/CalenderPartial/' + id;
            var dialog = $('<div style="display:none"></div>').appendTo('body');
            dialog.load(url, {},
                function (responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog({
                        autoOpen: true,
                        closeText: "",
                        width: $(window).width() - 300,
                        height: $(window).height() - 100,
                        close: function (event, ui) {
                            dialog.remove();
                        }
                    });
                });
            return false;
        });

@import "//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css";
@import "/resources/demos/style.css";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<button class="currentDay">BTN 1</button>
<button class="currentDay">BTN 2</button>
<button class="currentDay">BTN 3</button>

【讨论】：

嗯...我可以看到您的示例运行良好。我尝试将我的链接更改为您的链接，然后它根本不起作用。