如何解决ASPX Repeater中同ID文本框的jQuery Datepicker异常问题？

当Repeater内文本框ID重复时，jQuery的#ID选择器只会匹配DOM中第一个元素，导致后续项的Datepicker操作都指向第一个文本框。以下是几个不用修改ID的解决办法：

1. 使用CSS类选择器绑定Datepicker #

把文本框的CssClass属性设置为统一值，通过类选择器替代ID选择器绑定Datepicker，确保每个文本框都能独立初始化：

ASPX代码： #

<asp:Repeater ID="rptDates" runat="server">
    <ItemTemplate>
        <asp:TextBox ID="txtDate" CssClass="date-picker" runat="server" />
    </ItemTemplate>
</asp:Repeater>

jQuery代码： #

$(function() {
    // 给所有带date-picker类的文本框绑定Datepicker
    $('.date-picker').datepicker();
});

2. 基于Repeater项上下文绑定 #

利用Repeater的ItemDataBound事件，在后台为每个项内的文本框单独注册Datepicker脚本，确保每个文本框用自身的上下文触发：

后台C#代码： #

protected void rptDates_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        TextBox txtDate = e.Item.FindControl("txtDate") as TextBox;
        if (txtDate != null)
        {
            // 为当前项的文本框生成唯一的初始化脚本
            string script = $"$(function() {{ $('#{txtDate.ClientID}').datepicker(); }});";
            ScriptManager.RegisterStartupScript(txtDate, typeof(TextBox), $"dp_{e.Item.ItemIndex}", script, true);
        }
    }
}

（注：如果设置了ClientIDMode="Static"导致ClientID重复，可改用项内查找逻辑，比如$(this).find('.date-picker')）

3. 动态绑定+事件委托 #

通过事件监听文本框的focus事件，仅在当前文本框被点击时才绑定并显示Datepicker，确保操作指向触发事件的元素：

jQuery代码： #

$(document).on('focus', '#txtDate', function() {
    var $this = $(this);
    // 避免重复绑定
    if (!$this.data('datepicker')) {
        $this.datepicker({
            onSelect: function(dateText) {
                // 强制将选中日期写入当前文本框
                $this.val(dateText);
            }
        });
    }
    // 显示Datepicker
    $this.datepicker('show');
});

内容的提问来源于stack exchange，提问作者Don Del Grande