jQuery Datepicker 在 $.post 之后不起作用答案

【问题标题】：jQuery Datepicker not working after $.postjQuery Datepicker 在 $.post 之后不起作用
【发布时间】：2013-08-23 06:57:27
【问题描述】：

我已经查看了几十个类似的问题，但给出的答案都没有奏效。我正在通过 $.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 调用时确实可以正常工作。经过三个小时的挖掘，我希望有人能在这里找到我的线索。非常感谢！

【问题讨论】：

var thisId = $(this).attr('projectid'); ???
能否请您发布在ajax之后返回的数据。
我简化了可能令人困惑的代码，并添加了返回的部分表单。这是一个很大的表格，所以我不想发布整个内容 - 如果有帮助，我可以发布。
您不会覆盖任何表单内容吧？与表单相关的#addEditArea 是什么？
你试过把'$(".datepicker").datepicker();'在 $("#addEditArea").html(data) 之后，在 de $.post 内？

标签： javascript jquery datepicker

【解决方案1】：

我不久前创造了类似的东西。虽然是添加输入框的功能，但思路大致相同。

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

我不知道你如何在页面上放置代码是否重要，无论是使用 .html() 还是 .insertBefore()，但这对我有用。

【讨论】：

【解决方案2】：

我遇到了类似的问题，我在内容加载后做了以下操作来解决这个问题：

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

【讨论】：