javascript - $.postの後にjQuery Datepickerが機能しない

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'data' で返されるフォームの入力フィールドです。

<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単に機能しません。 Datepickerajax 経由で呼び出されない場合は完全に機能します。3時間掘り下げた後、誰かが私をここで手がかりにしてくれることを願っています. 本当にありがとう！