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 
});