Question

我通过单击按钮打开引导模式。模态打开，并且有一个连接到datepicker的输入字段。我点击文本框，然后看到日历。我关闭模态。我再次打开模态，然后在文本框中单击，日历不会显示。为什么第二次打开模态并点击文本框时，日期选择器不会显示？

我有一个部分视图_RequestAppointment，底部有以下javascript。

<script>
    $(function () {

        $(".requestedAppointmentDate").datepicker();

        $('#myModal').on('hidden.bs.modal', function () {
            //alert('hello');
            //$(".requestedAppointmentDate").datepicker("destroy");
            //$(".requestedAppointmentDate").removeClass("hasDatepicker").removeAttr('id');
            $(".requestedAppointmentDate").datepicker("destroy");
        });

        $('#myModal').on('show.bs.modal', function () {
            //$('.HomeContainer').addClass('blur');
            $(".requestedAppointmentDate").datepicker({});
        })

    });
</script>

这是主页中的javascript。我只显示与_RequestAppointment局部视图相关的代码。

$(function () {
    function onRequestAppt() { var url = '@Url.Action("_RequestAppointment", "Home")'; ResetModal(); LaunchModal(url); }



    function ResetModal() {      // Resets the popup
                $('body').on('hidden.bs.modal', '.modal', function () {
                    $(this).removeData('bs.modal');
                });
            }
        function LaunchModal(url) {
            $('#myModal').modal({
                remote: url,
                backdrop: 'static'
            });
        }


    $('#myModal').on('show.bs.modal', function () {
                    $('.HomeContainer').addClass('blur');
                    //$(".requestedAppointmentDate").datepicker({});
                })

                $('#myModal').on('hide.bs.modal', function () {
                    $('.HomeContainer').removeClass('blur');

                });
}

我在google上搜索了这个并找不到解决方案。请帮忙。

Answer 1

我搜索了jquery ui datepicker，发现了这个：

$('#myModal').on('hidden.bs.modal', function () {
    $("#datepicker").datepicker( "destroy" );
})

尝试关闭它。

您还可以在哪里打开脚本来初始化日历？

$('#myModal').on('shown.bs.modal', function (e) {
  $("#datepicker").datepicker({});
})

Answer 2

在没有看到代码的情况下，问题最有可能出现在初始化日历插件的调用位置。

如果您的视图确实被销毁，那么onShow方法就可以了，因为您可以保证它会被调用以进行全新显示。但是，除非您自己管理这些视图的生命周期，否则模态视图通常不会被正确（有意）地销毁。

在这些情况下的一个常见问题是坚持DOM元素上的侦听器的Ghost Views（它们没有完全被破坏），您可能还有多次重复显示视图的dom元素。（检查你的DOM）

在我的情况下使用Backbone和Marionette我将插件的初始化从render方法移动到onDomRefresh方法，因为我使用ModelBinder重新渲染模型更改时的视图，反之亦然。在后续重新呈现同一视图时，onShow方法未被调用，但onDomRefresh被调用。

希望这有帮助。

Answer 3

感谢LiverPoolOwen指出了bs.modal.shown（）事件。我所要做的就是在shown（）事件中初始化我的datepicker，就是这样。我错误地在bs.modal.show（）事件中初始化了datepicker。

我没有破坏日期选择器或类似的东西。

jquery datepicker没有显示boostrap模态3

3 个答案: