动态创建ui DateTimePicker时未捕获类型错误

问题描述 投票:1回答:1

这有效:

    $(document).ready(function ($) {
        $('#datetimepicker1').datetimepicker();

当我有

 <p>Date: <input type="text" id="datetimepicker1"></p>

放在我的主表格上。因为它的工作原理,它向我建议所有引用都可以。

但是,当我启动模态时:

$(function () {
            $('#rotasModal').on("show.bs.modal", function (e) {

哪个JavaScript附加

<input type="text" id="datetimepicker2">
 <input type="text" id="datetimepicker3">...

x这些形式(每个都有一个唯一的id)我得到Uncaught TypeError:$(...)。datetimepicker在调用时不是函数:

$('#datetimepicker2').datetimepicker();

即使我推迟并在调试控制台中尝试它,同样的错误。它似乎与模态有关,而不是在显示模态时生成组件的事实(因为我也尝试直接以模态的形式创建它们而不是动态生成它们)。

有什么想法可能导致这个问题吗?

编辑:因为我被要求更具体。代码,我在layouts / app.blade.php中包含了引用:

<script language="JavaScript"
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
    <script language="JavaScript"
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous"></script>
    <script src="{{asset('js/jquery-ui-timepicker-addon.js')}}"></script>
    <script src="{{asset('js/jquery-ui-sliderAccess.js')}}"></script>

在create.blade的顶部,我有:

extends('layouts.app')
@section('content')

    <div class="container">

再向下我有模态声明:

div class="modal fade" id="rotasModal"
     tabindex="-1" role="dialog"
     aria-labelledby="rotasModalLabel">

如果我查看源代码,我会看到:

<!DOCTYPE html>

<script language="JavaScript"
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>
<script language="JavaScript"
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>


<script src="http://oc.com:8888/oc/public/js/jquery-ui-timepicker-addon.js"></script>
<script src="http://oc.com:8888/oc/public/js/jquery-ui-sliderAccess.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

 <link href="http://oc.com:8888/oc/public/css/jquery-ui-timepicker-addon.css">
    <!-- Styles -->
    <link href="http://oc.com:8888/oc/public/css/app.css" rel="stylesheet">
    <link href="http://oc.com:8888/oc/public/css/ocm.css" rel="stylesheet">

您可以忽略我关于动态创建的声明(实际上是从ajax成功中的数据),因为我尝试将其注释掉并对控件进行硬编码。

它仍然表示控件只有在我从$(document).ready(....调用.datetimepicker()时才能工作。

我不知道插件代码是如何引用的。如果是这种情况,那么.ready()中的可用性如何,以及为什么我调用$('#datetimepicker1')。datetimepicker();从Chrome控制台我得到同样的错误?

感谢您坚持不懈地帮助我。

javascript jquery laravel-5
1个回答
1
投票

也许你想将.bs.modal显示为

$(function(){
        $('#rotasModal').on("shown.bs.modal", function (e) {

代替

$(function () {
        $('#rotasModal').on("show.bs.modal", function (e) {
© www.soinside.com 2019 - 2024. All rights reserved.