Question

我在我的网络应用程序中使用模态来进行用户输入。用户第一次使用模态输入数据时，它没有问题。但是，如果用户在第一个模式之后打开另一个模态，则jQuery日期选择器不会初始化。用户必须刷新页面才能使用datepicker输入第二条记录。模态体通过AJAX加载。在包含模态体的HTML文件的底部，一些脚本被用于初始化日期选择器。以下是模态内容的一般结构：

<div class="modal-content">
    <div class="modal-header">
    ...more modal content goes here...
    </div>
</div>

<script>
    $('.date-picker').datepicker({
        rtl: App.isRTL(),
        autoclose: true
    });
</script>

由于某些内容是由PHP生成的（即编辑记录时），因此不能在请求页面上简单地包含它。我该如何解决这个问题？

Answer 1

问题是该脚本仅在第一次显示模式时被触发。我通过使用以下内容覆盖ajax中的默认远程模态加载函数来解决它：

$("[data-toggle='open_modal']").click(function(event) {
        event.preventDefault();
        $modal = $($(this).attr("data-target"));
        $modal.modal().find('.modal-content').load($(this).attr('href'), function() {
            $('.date-picker').datepicker({
                rtl: App.isRTL(),
                autoclose: true
            });
        });
    });

请注意，您不能保留data-toggle ='modal'，因为它会尝试同时使用bootstrap加载功能。将其更改为其他内容，即。 open_modal。

每次加载模态时jQuery datepicker都没有初始化

1 个答案: