我查看了几十个类似的问题，但没有给出任何答案。我通过$ .post调用HTML表单，并且此表单中有一个datepicker字段。我一直在尽可能多地阅读.live（已弃用）和.on以尝试使返回的表单在DOM中生效 - 但是无法使其正常工作。
这就是我现在调用表单的方式：
$(".projectListHead").on('click', function() {
var thisId = '12';
$.post('/admin/ajax/projects/manage.php', { id: thisId }, function(data) {
$("#addEditArea").html(data)
});
});
我也尝试过：
$("body").on('click', ".projectListHead", function() {
var thisId = '12';
$.post('/admin/ajax/projects/manage.php', { id: thisId }, function(data) {
$("#addEditArea").html(data);
$(".datepicker").datepicker();
});
});
这也行不通。
这是'data'中返回的表单中的datepicker输入字段：
<input type="text" class="datepicker" id="datePickThis" />
选择datepicker字段的脚本：
$(".datepicker").datepicker();
**更新**
我尝试了一个非常有意义的建议，并且在JSFiddle中工作，但是不起作用：
$(".projectListHead").click(function() {
var thisId = '12';
$.post('/admin/ajax/projects/manage.php', { id: thisId }, function(data) {
$("#addEditArea")
.html(data)
.find('.datepicker')
.datepicker();
});
});
但是这个示例可以工作，如果我只是覆盖.html值，如下所示：
$(".projectListHead").click(function() {
var thisId = '12';
$.post('/admin/ajax/projects/manage.php', { id: thisId }, function(data) {
$("#addEditArea")
.html('<input type="text" class="datepicker" id="datePickThis" />')
.find('.datepicker')
.datepicker();
});
});
另外，我知道它很长但是这里是我回电话的全部HTML。也许问题出在这里：
<!-- PROJECT INFORMATION HEADER --------->
<div class="projManHeader">
<div class="clientPhoto" style="background-image: url(/admin/customers/images/4_thumb.jpg);"></div>
<div class="projectInfo">
<h1>William Richards</h1>
<h2>Family Portraits</h2>
<span style="font-size: 13px;">at Davis Arboretum</span>
</div>
<div class="projectDateInfo">
<h1>July 19th</h1>
<h2>6:30 PM</h2>
</div>
</div>
<!-- NAVIGATION ICON MENU ------>
<!-- PRELOAD IMAGE DIV ---->
<div style="display: none">
<img src="/images/icons/megaphone_over.gif" />
<img src="/images/icons/infocircle_over.gif" />
<img src="/images/icons/staffcircle_over.gif" />
<img src="/images/icons/paycircle_over.gif" />
</div>
<div class="projectIconsContainer">
<div id="comIcon" class="comIcon"></div>
<div class="sectionHeader">
<span style="font-weight: bold;">Contact</span><br />
<span style="font-size: 9px;">Email Sent<br />
on Aug 31, 2013
</span>
</div>
<div class="infoCircleIcon"></div>
<div class="sectionHeader">
<span style="font-weight: bold;">Project Info</span><br />
<span style="font-size: 9px;">Email Sent<br />
on Aug 31, 2013
</span>
</div>
<div class="staffCircleIcon"></div>
<div class="sectionHeader">
<span style="font-weight: bold;">Staff</span><br />
<span style="font-size: 9px;">Shooter:<br />
Leah Parker
</span>
</div>
<div class="payCircleIcon"></div>
<div class="sectionHeader">
<span style="font-weight: bold;">Payments</span><br />
<span style="font-size: 9px;">Cost:<br />
$160.00
</span>
</div>
</div>
<!-- END NAVIGATION ICON MENU -->
<!-- BEGIN AJAX FILL AREA ------>
<div id="ajaxFillArea"></div>
<!---- END AJAX FILL AREA ----->
<!-- BEGIN HIDDEN COMMUNICATION DIV ----->
<div id="hiddenComDiv" style="display:none;">
<div style="padding: 15px; display: inline-block; vertical-align: middle;">
<h2>Communication</h2>
</div>
<div style="display: inline-block; float: right; vertical-align: middle; margin-top: 13px; margin-right: 30px;">
<input type="button" id="newComButton" value="NEW COMMUNICATION" />
</div><br />
<div id="newComForm" style="display: none;">
<div style="padding: 15px; width: 600px; min-height: 300px; background-color: #f0f0f0; border: solid 1px #ccc;">
<div style="padding: 5px; width: 100px; display: inline-block; text-align: right;">Send Email:</div>
<div style="padding: 5px; display:inline-block;">
<input type="text" name="comEmailSubject" style="width: 430px;" placeholder="email subject here" />
</div><br />
<div style="padding: 5px; width: 100px; display: inline-block; text-align: right;">Message:</div>
<div style="padding: 5px; display:inline-block; vertical-align: top;">
<textarea name="comEmailMessage" style="width: 430px; height: 110px;" placeholder="email message here" ></textarea>
</div><br />
<div style="padding: 5px; width: 100px; display: inline-block; text-align: right;">Notes:</div>
<div style="padding: 5px; display:inline-block; vertical-align: top;">
<textarea name="comEmailNotes" style="width: 430px; height: 50px;" placeholder="followup / notes go here" ></textarea>
</div><br />
<div style="padding: 5px; width: 100px; display: inline-block; text-align: right;"></div>
<div style="padding: 5px; display:inline-block; vertical-align: top;">
<input type="text" class="datepicker" id="datePickThis" />
<input type="button" value="SEND" />
<input type="button" value="CANCEL" />
</div><br />
</div>
</div>
<!-- HIDDEN COMMUNICATION DIV JQUERY -------->
<script>
$(document).ready(function() {
// NEW COMMUNICATION FORM
$("#newComButton").click(function() {
$("#newComForm").slideDown(function() {
$("input[name=comEmailSubject]").focus();
});
});
// OPEN COMMUNICATION SECTION
$("#comIcon").click(function() {
var hiddenHtml = $("#hiddenComDiv").html();
$("#ajaxFillArea").html(hiddenHtml);
});
});
</script>
</div>
“数据”中返回的表单正确显示，但datepicker根本不起作用。当没有通过ajax调用时，Datepicker确实可以正常工作。经过三个小时的挖掘，我希望有人能在这里提醒我。非常感谢！
答案 0 :(得分：0)
我刚才创造了类似的东西。虽然它是添加输入字段的功能，但这个想法大致相同。
$("#addDate").click(function() {
var newDate = '<input type="text" class="dateSelector" value="" />';
$(newDate).insertBefore('#dateBeforeThis');
$( ".dateSelector" ).datepicker();
});
我不知道你是如何将代码放在页面上的，无论是使用.html（）还是.insertBefore（），但这对我有用。
答案 1 :(得分：0)
我有类似的问题，我在内容加载后执行了以下操作来解决问题：
$("#datepicker").removeClass('hasDatepicker');
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});