jquery - 在未显示的模式中加载/准备 jQuery

Question

我正在使用 Bootstrap DateTimePicker在一个使用 Vue.JS 的项目中。这通常运行良好，但我最近遇到了一个我从未遇到过的问题，这让我感到困惑。

在页面加载时，有两个日期时间选择器，它们都可以工作。参见 this partial screenshot .但是，在页面的更下方，有一些按钮可以调用新的 Vue.JS 模态框(单击按钮实质上会调用 $('#modal-xxx').modal('show');。

将这些 DateTime-pickers 放在该模态中会使它们不起作用。实际样式仍然加载 - 但它们不会触发。我认为这是因为用于这些的 JavaScript 卡在两种状态之间；

a) 当模式出现时调用它的状态，据我所知，它永远不会工作 - 因为浏览器仅在页面加载时解释它需要的内容，然后停止。

b) 在页面加载时加载，同样，这可能不会起作用，因为此时元素不可见。

我已尝试尽我所能解决此问题 - 但无论用于调用这些 DateTimePickers 的 javascript 是放置在模态本身中 - 还是页面底部 - 它仍然会使元素无用。

我附上了下面的示例代码库:

<div class="form-group" :class="{'has-error': updateExampleForm.errors.has('example')}">
    <label class="col-md-4 control-label">Example</label>

    <div class='col-md-6'>
        <div class='input-group date' id='update_example'>
            <input type='text' class="form-control" v-model="updateExampleForm.example" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <script type="text/javascript">
            $( document ).ready(function() {
                $('#update_example').datetimepicker();
            });
        </script>
        <span class="help-block" v-show="updateExampleForm.errors.has('example')">
            @{{ updateExampleForm.errors.get('example') }}
        </span>
    </div>
</div>

任何人都可以确认为什么这不会触发预期结果(表单有效) - 如果是这样，还有什么替代方法可以做到这一点？如果您能够详细说明您提出的任何替代方法背后​​的想法，我们将不胜感激!

Answer 1

最终解决方案是在显示模态的函数中执行此操作:

    editExample(example) {
        $('#modal-update-example').modal('show');
        this.$nextTick(function(){
            $('#update_example_1').datetimepicker();
            $('#update_example_2').datetimepicker();
        });
    }

这会等到其他操作完成，然后在元素上实例化日期时间选择器。