Question

我有一个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不是一个函数，但它仍在工作。

Answer 1

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

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

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

Answer 2

它对我来说很好......请查看工作示例

＆＃13;

$('.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;
        });

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery Dialog需要两次单击才能打开

2 个答案: