jQuery Datepicker不能在$ .post之后工作

Question

我已经浏览了几十个类似的问题，但没有一个给出的答案有效。我通过$ .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(); 
      }); 
    }); 

这也没有工作。

这是形式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根本行不通。 Datepicker在没有通过ajax调用时可以很好地工作。经过三个小时的挖掘，我希望有人能够在这里找到我。非常感谢！

Answer 1

前段时间我创建了类似的东西。尽管添加输入字段是功能，但这个想法大致相同。

$("#addDate").click(function() { 
    var newDate = '<input type="text" class="dateSelector" value="" />'; 
    $(newDate).insertBefore('#dateBeforeThis'); 
    $(".dateSelector").datepicker(); 
}); 

我不知道不要紧，你如何在页面上放置的代码，无论使用的.html（）或.insertBefore（），但是这是为我工作。

Answer 2

我有类似的问题，我做了内容加载后下面，来解决问题：

$("#datepicker").removeClass('hasDatepicker'); 
$("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true 
});