使用document.ready动态添加MD.BootstrapPersianDateTimePicker失效问题

问题描述 #

我使用MD.BootstrapPersianDateTimePicker日期选择器，直接将输入框写在HTML代码中能正常工作：

<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />

完整示例：

<div class="col-md-4" id="mydiv">
    <input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />
</div>

但通过jQuery的replaceWith方法在document.ready中动态添加该输入框时，页面仅显示普通输入框，日期选择器功能完全失效，代码如下：

<div class="col-md-4" id="mydiv">
    <div id="div2"></div>
</div>
<script>
    $(document).ready(function () {
        $("#div2").replaceWith("<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />");
    });
</script>

解决方法 #

这类依赖data属性初始化的组件，默认是在页面首次加载完成后扫描DOM元素自动初始化的。动态添加的元素不在初始扫描范围内，因此需要手动调用初始化方法。

方法一：创建元素后立即初始化 #

<div class="col-md-4" id="mydiv">
    <div id="div2"></div>
</div>
<script>
    $(document).ready(function () {
        // 先创建输入框的jQuery对象
        const $dateInput = $("<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />");
        // 替换目标元素
        $("#div2").replaceWith($dateInput);
        // 手动初始化日期选择器
        $dateInput.MdPersianDateTimePicker({
            placement: 'left',
            trigger: 'focus',
            enableTimePicker: false
        });
    });
</script>

方法二：替换完成后通过选择器初始化 #

<div class="col-md-4" id="mydiv">
    <div id="div2"></div>
</div>
<script>
    $(document).ready(function () {
        // 执行替换操作
        $("#div2").replaceWith("<input id='mydatepicker' data-mddatetimepicker='true' data-placement='left' data-trigger='focus' data-enabletimepicker='false' />");
        // 找到新添加的输入框并手动初始化
        $("#mydatepicker").MdPersianDateTimePicker();
    });
</script>

注意：使用方法二时，要确保输入框的ID唯一，避免出现重复初始化或找不到元素的问题。

内容的提问来源于stack exchange，提问作者topcool