带有 AJAX 动态创建行的 jQuery UI Datepicker答案

【问题标题】：jQuery UI Datepicker with AJAX dynamically created row带有 AJAX 动态创建行的 jQuery UI Datepicker
【发布时间】：2013-10-15 13:10:22
【问题描述】：

如果能帮助我让 JQuery UI Datepicker 处理动态创建的行，我将不胜感激。

用户可以向表中添加额外的行（部分视图）以启用更多数据输入（取自 Steven Sanderson 的博客）。这是通过 AJAX 实现的。添加行效果很好，但我想为这些动态创建的行中的某些输入启用 jQuery UI Datepicker (http://www.asp.net/mvc/tutorials/javascript/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4)。我已经让 Datepicker 在没有动态添加行的情况下工作，但我只是无法弄清楚如何让它在我的 AJAX 中工作。提前致谢。

这是创建新行的代码：

$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $("#editorRows").append(html);
        },

    }); return false;


});

这是局部视图新行：（我已将 [DataType(DataType.Date)] 添加到相应的视图模型字段）

@model ef_tut.ViewModels.LineViewModel
@using ef_tut.Models
@using ef_tut.ViewModels
@using ef_tut.WebUI.Helpers

@using (Html.BeginCollectionItem("LineViewModels"))

{


<table class="editorRow">
<tr>
<td>
ClaimID: @Html.EditorFor(model => model.ClaimID)</td>
<td>
ClaimLineID: @Html.EditorFor(model => model.ClaimLineID)</td>
     <td>

ClaimantUserID: @Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FirstName"))</td>
    <td >
CatID: @Html.DropDownListFor(model => model.Selectedcatid, new SelectList(Model.categories, "CatID", "CatName"))</td>
<td >
SubCatID: @Html.TextBoxFor(model => model.SubCatID)</td>
<td>
Comments: @Html.EditorFor(model => model.Comments)</td>
<td>
HoursCost: @Html.EditorFor(model => model.HoursCost)</td>
<td >
MeetingDate: @Html.TextBoxFor(model => model.MeetingDate )</td>
<td>
MileageCost: @Html.EditorFor(model => model.MileageCost)</td>
<td>
ProxyClaim: @Html.EditorFor(model => model.ProxyClaim)</td>
<td>
TotalCost: @Html.EditorFor(model => model.TotalCost)</td>
<td>
TravelCost: @Html.EditorFor(model => model.TravelCost)</td>
    <td>
Venue: @Html.EditorFor(model => model.Venue)</td>
<td>
Hours: @Html.EditorFor(model => model.Hours)</td>

    <td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr></table>



}

这是连接日期选择器的 .js。

$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });

【问题讨论】：

标签： asp.net jquery asp.net-mvc-4

【解决方案1】：

您将不得不为成功事件中的新行连接日期选择器。

$("#addItem").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) {
                        $("#editorRows").append(html);
                        $('#editorRows .date').datepicker({ dateFormat: "dd/mm/yy" });
                    },

                }); return false;


            });

});

【讨论】：

【解决方案2】：

你应该考虑的事情：

确保在文档准备好时应用日期选择器。在document.getready函数下做
在您必须应用 datepicker 的所有 textbox 上应用公共类。然后像这样做

$('.DatepickerClass').datepicker()

我已经使用了另一个 jquery datepicker，但这也应该适用于您的 ajax datepicker。

【讨论】：

我认为文档就绪仅适用于页面最初加载时。我的问题是动态创建的行。所有输入都有 .date 类。