jquery datepicker在引导模式中具有动态文本框答案

【问题标题】：jquery datepicker with dynamic textboxes in bootstrap Modaljquery datepicker在引导模式中具有动态文本框
【发布时间】：2018-12-12 18:24:51
【问题描述】：

我在 jq-datepicker 类之后的动态控件上应用 jquery datepickers

只需设置一个 jsfiddle 示例来演示带有模态的问题日期选择器

please click the link to follow demo

当我没有包含模态时，相同的代码工作正常这里是另一个没有模态的工作演示示例

please click the link to follow demo

场景：我有一段代码可以进行 ajax 调用，当从 ajax 调用返回响应时，某个 div 会更新

    <html>
    <body>
    <div class="content-wrapper">

        @RenderBody()
        <div class="jq-loading-bar"></div>
        <div id="ajax-place-holder" style="width:100%; height:100%;"></div>
    </div>
    </body>
    </html>

下面是对特定动作方法的ajax调用返回的代码sn-p代码

    <div id="ajax-place-holder" style="width:100%; height:100%;">
        <div class="modal fade show" id="myModal" style="padding-right: 21px; display: block;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">

                        <form action="/profile/updateeducation" class="jq-form" method="post" novalidate="novalidate">
                            <label for="placeholder-input" class="col-sm-12 col-form-label text-center">ADD EDUCATION</label>
                            <hr>
                            <div class="form-group row">
                                <label class="col-sm-12 col-form-label" for="SelectedAcademicLevel">Academic Level</label>
                                <div class="col-sm-12">
                                    <select class="form-control" data-val="true" data-val-required="academic level required" id="SelectedAcademicLevel" name="SelectedAcademicLevel">
                                        <option value="">Select Academic Level</option>
                                        <option value="1">UPSR</option>
                                        <option value="2">PT3/PMR</option>
                                        <option selected="selected" value="3">SPM</option>
                                        <option value="4">Matrikulasi</option>
                                        <option value="5">STPM</option>
                                        <option value="6">STAM</option>
                                        <option value="7">SKM</option>
                                        <option value="8">Diploma</option>
                                        <option value="9">Advance Diploma</option>
                                        <option value="10">Bachelor</option>
                                        <option value="11">Master</option>
                                        <option value="12">PHD</option>
                                    </select>
                                    <span class="field-validation-valid text-danger" data-valmsg-for="SelectedAcademicLevel" data-valmsg-replace="true"></span>
                                </div>
                                <label class="col-sm-12 col-form-label" for="AcademicDetailItem_courseTitle">Course Title</label>
                                <div class="col-sm-12">
                                    <input class="form-control" data-val="true" data-val-length="couse title should be min 10 and max 70 in length" data-val-length-max="70" data-val-length-min="10" data-val-regex="First name should contain alphabets, white spaces or characters in [-_'. (repeating one at a time)]  only." data-val-regex-pattern="^[a-zA-Z][a-zA-Z0-9]*([ '\-_\.]{1}[a-zA-Z0-9]+)*$" data-val-required="course title is required" id="AcademicDetailItem_courseTitle" name="AcademicDetailItem.courseTitle" placeholder="Enter Course Title" type="text" value="Computer Engineering">
                                    <span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.courseTitle" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-12 col-form-label" for="SelectedAcademicDiscipline">Academic Discipline</label>
                                <div class="col-sm-12">
                                    <select class="form-control" data-val="true" data-val-required="academic discipline required" id="SelectedAcademicDiscipline" name="SelectedAcademicDiscipline">
                                        <option value="">Select Academic Discipline</option>
                                        <option value="1">Anthropology</option>
                                        <option value="2">Applied sciences</option>
                                        <option selected="selected" value="3">Archaeology</option>
                                        <option value="4">Arts</option>
                                        <option value="5">Biology</option>
                                        <option value="6">Chemistry</option>
                                        <option value="7">Computer Science</option>
                                        <option value="8">Earth sciences</option>
                                        <option value="9">Economics</option>
                                        <option value="10">Engineering and technology</option>
                                        <option value="11">Formal sciences</option>
                                        <option value="12">History</option>
                                        <option value="13">Human geography</option>
                                        <option value="14">Humanities</option>
                                        <option value="15">Languages and literature</option>
                                        <option value="16">Law</option>
                                        <option value="17">Mathematics</option>
                                        <option value="18">Medicine and health</option>
                                        <option value="19">Natural sciences</option>
                                        <option value="20">Performing arts</option>
                                        <option value="21">Philosophy</option>
                                        <option value="22">Physics</option>
                                        <option value="23">Political science</option>
                                        <option value="24">Psychology</option>
                                        <option value="25">Social sciences</option>
                                        <option value="26">Sociology</option>
                                        <option value="27">Space sciences</option>
                                        <option value="28">Statistics</option>
                                        <option value="29">Theology</option>
                                        <option value="30">Visual arts</option>
                                        <option value="31">Other</option>
                                    </select>
                                    <span class="field-validation-valid text-danger" data-valmsg-for="SelectedAcademicDiscipline" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="placeholder-input" class="col-sm-12 col-form-label text-center">Duration from to until</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-12 col-form-label" for="AcademicDetailItem_durationFrom">Starting Date</label>
                                <div class="col-sm-12">
                                    <input class="form-control jq-datepicker hasDatepicker" data-val="true" data-val-date="The field Starting Date must be a date." data-val-required="Starting date is Required" id="AcademicDetailItem_durationFrom" name="AcademicDetailItem.durationFrom" placeholder="Enter Date From" type="text" value="15/11/2018">
                                    <span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.durationFrom" data-valmsg-replace="true"></span>
                                </div>
                                <label class="col-sm-12 col-form-label" for="AcademicDetailItem_durationUntil">Completion Date</label>
                                <div class="col-sm-12">
                                    <input class="form-control jq-datepicker hasDatepicker" data-val="true" data-val-date="The field Completion Date must be a date." data-val-required="Completion date is Required" id="AcademicDetailItem_durationUntil" name="AcademicDetailItem.durationUntil" placeholder="Enter Date Completion" type="text" value="26/11/2018">
                                    <span class="field-validation-valid text-danger" data-valmsg-for="AcademicDetailItem.durationUntil" data-valmsg-replace="true"></span>
                                </div>
                            </div>
                            <!---<button type="button" id="addMore1" class="btn btn-default btn-sm">
              <span class="glyphicon glyphicon-plus"></span> Add More
            </button>-->
                            <br>
                            <div class="card-body text-center">
                                <input data-val="true" data-val-number="The field individualID must be a number." data-val-required="The individualID field is required." id="AcademicDetailItem_individualID" name="AcademicDetailItem.individualID" type="hidden" value="2">
                                <input data-val="true" data-val-number="The field individualAcademicQualificationDetailID must be a number." data-val-required="The individualAcademicQualificationDetailID field is required." id="AcademicDetailItem_individualAcademicQualificationDetailID" name="AcademicDetailItem.individualAcademicQualificationDetailID" type="hidden" value="5">
                                <a href="/profile/edit" class="jq-loader" data-jq-action="DismissModal">
                                    <button type="button" class="btn btn-sm btn-secondary shadow-secondary px-5" value="Cancel">Cancel</button>
                                </a>
                                <button type="submit" class="btn btn-sm btn-primary shadow-primary px-5 jq-loader" value=""><span>&nbsp;&nbsp;Save&nbsp;&nbsp;</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>

下面是我复制 ajax 调用呈现的代码的环境图像。此代码作为引导模式弹出窗口运行，但仍作为 div ajax-place-holder 的一部分存在，该页面在呈现第一页时存在于页面上。

Snapshot of code Running as Modal Popup returned by ajax call

Snapshot of chrome debug tools

这是在 ajax 调用返回的动态创建的元素上应用日期选择器的最后一部分 javascript 代码。

    <script type="text/javascript">
      $('body').on('focus', ".jq-datepicker", function () {
          ////debugger;
          console.log('body focus jq-datepciker');
          $(this).datepicker({
              changeMonth: true,
              changeYear: true,
              yearRange: "-100:-0",
              numberOfMonths: 1,
              dateFormat: "dd/mm/yy",
              showWeek: true,                
          });
          $(this).datepicker("show");            
      });
    </script>

每当任何具有类 jq-datepicker 的输入元素获得焦点并且代码在控制台中被调用和执行时都会调用此函数。

以下是每次具有相同类的输入元素获得焦点时的控制台快照。

Console Log everytime input gets focus

但我的 UI 无法获取任何日期选择器。

上面显示的所有快照均来自谷歌浏览器。

现在，当我在 Internet Explorer 上运行相同的代码时，问题变得更加有趣，它似乎可以工作，并且 datepicker 在获取输入元素的焦点时显示正常，下面是 Internet Explorer 的屏幕截图

snapshot from internet explorer

datepicker 在 Internet Explorer 上运行良好，但不适用于 chrome 或 Firefox p>

【问题讨论】：

我可以看到Chrome浏览器有3个红十字。可能是一些 Javascript 错误导致脚本停止而不执行。您可能需要删除 Chrome 和 Firefox 控制台中出现的所有 JS 错误
脚本执行良好，这些错误是针对具有相同 ID 的多个 html 元素的，这不会对 javascript 造成任何问题，但每次我的文本框获得焦点时都会调用 javascript 焦点事件。
但脚本在身体焦点上 => $('body').on('focus',
我也这样做了检查 $('#ajax-place-holder').on('focus', ".jq-datepicker", function () {... 但是问题依旧
这里也是错误的屏幕截图link

标签： javascript jquery asp.net-mvc jquery-ui-datepicker dynamic-html

【解决方案1】：

我复制了您的部分并删除了模态元素，然后通过 AJAX 附加了 HTML。它没有用，它坏了。我的代码

<script type="text/javascript">
    $('body').on('focus', ".jq-datepicker", function () {
        ////debugger;
        console.log('body focus jq-datepciker');
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:-0",
            numberOfMonths: 1,
            dateFormat: "dd/mm/yy",
            showWeek: true,
        });
        $(this).datepicker("show");
    });
    $.ajax({
        url: "/Home/Partial",
        method: "GET"
    }).done(function (data) {
        $("#mainrow").html(data);
        });
</script>

通过删除类 hasDatepicker

<input class="form-control jq-datepicker hasDatepicker" data-val="true" data-val-date="The field Completion Date must be a date." data-val-required="Completion date is Required" id="AcademicDetailItem_durationUntil" name="AcademicDetailItem.durationUntil" placeholder="Enter Date Completion" type="text" value="26/11/2018">

成功了。该类混淆了 JQuery，使其认为日期选择器已经打开。

【讨论】：

哦，等等，您直接从页面中复制了部分内容？这就是为什么该类在您的代码中。如果你没有那个类，你的代码对我有用。
我已按照您的提示从代码中删除了 hasDatepicker 类，一旦在我的模式打开 First Image without hasDatepicker class 后将 html 替换为 ajax 调用，然后我的函数的快照将焦点放在日期选择器 code from visual studio for datepicker focus 然后是第三个屏幕截图在我的输入控件获得焦点并且 jquery 自动将 hasDatepicker 类添加到我的元素后，但 datepicker 仍然不会显示Added hasDatepicker class by jquery (but datepicker won't show)
我没有直接从我的代码在 Visual Studio 中生成的部分页面中复制该部分部分，我将部分视图呈现为字符串，然后将生成的 html 作为 json 返回给响应时的 ajax 调用。完成（函数（）{}）；
只是添加，如果我不进行 ajax 调用并且我将代码作为服务器重定向调用从按钮操作或锚点 herf 运行并打开模式作为视图而不是部分视图作为操作调用的响应datepicker 工作正常，因为页面再次呈现为新页面
所以如果类 hasDatepicker 来自服务器，那可能是你的问题。 $.datepicker 函数应该将该类添加到输入元素。