我正在将jquery datepickers应用于遵循jq-datepicker类的动态控件
只需设置一个jsfiddle示例，以使用模式演示问题datepicker
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调用返回的代码片段
<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> Save </span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Snapshot of code Running as Modal Popup returned by ajax call
Snapshot of chrome debug tools
这是最后一部分javascript代码，将日期选择器应用于由ajax调用返回的动态创建的元素。
<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无法获得任何日期选择器。
上面显示的所有快照均来自google chrome。
现在，当我在Internet Explorer上运行相同的代码时，问题变得更加有趣，它似乎可以正常工作，并且datepicker可以很好地显示输入元素的焦点，下面是Internet Explorer的屏幕截图
snapshot from internet explorer
datepicker对于Internet Explorer来说运行良好，但不适用于chrome或firefox，但由于我的知识有限，我已经尝试了我所知道的一切，但是我无法弄清楚如何解决此问题，请帮忙
答案 0 :(得分：0)
我复制了您的partial并删除了模态元素，然后通过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混淆，使其认为日期选择器已经打开。