0

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

4

2 回答 2

0

I created something similar a while ago. Though it's function to add a input field, the idea is about the same.

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

I don't know does it matter how you place the code on the page, whether using .html() or .insertBefore(), but this is working for me.

于 2013-08-23T07:59:28.367 回答
0

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

$("#datepicker").removeClass('hasDatepicker');
$( "#datepicker" ).datepicker({
             changeMonth: true, 
             changeYear: true
});
于 2013-12-11T13:24:09.393 回答