Jquery/Javascript：如何获取动态生成控件的 ClientID答案

【问题标题】：Jquery/Javascript: How can I get ClientID for dynamically generated controlsJquery/Javascript：如何获取动态生成控件的 ClientID
【发布时间】：2017-04-12 19:13:09
【问题描述】：

如何获取使用 javascript/jquery 动态创建的控件的客户端 ID。

我有一个日期选择器，如果值发生变化，它应该触发一个 textchanged 事件并执行一些功能。下面是我的脚本

function BindControlEvents() {
    $(".datepicker").datepicker({
        format: 'mm/dd/yyyy',
        autoclose: true,
        todayBtn: 'linked'
    }).on('changeDate', function (ev) {
        __doPostBack('MainContent_dteFr1002', '');
    }).on('clearDate', function (ev) {
        //to do
    });
}

//Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

//Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        BindControlEvents();
    });

动态生成文本框日期选择器的代码隐藏

protected void Page_Init(object sender, EventArgs e)
{
      LoadControls(reportDefId);
}

protected void LoadControls(int reportDefId)
{
  HtmlTableCell cellDate = new HtmlTableCell();
  TextBox dte = new TextBox();
  dte.ToolTip = "If you need to filter for blank dates, please select date range 1/1/1753-1/1/1753";
  dte.Attributes.Add("type", "text");
  dte.Attributes.Add("class", "datepicker");
  if (rfl.fieldDisplayName.Contains("Start") || rfl.fieldDisplayName.Contains("End"))
      dte.ID = "dte" + id.ToString();
  else
      dte.ID = "dteFr" + id.ToString();
  dte.Style["Width"] = "85px";
  dte.Style["Height"] = "24px";
  dte.TextChanged += new EventHandler(dte_TextChanged);
  cellDate.Controls.Add(dte);
}

为了测试，我对 ClientID 'MainContent_dteFr1002' 进行了硬编码，以查看它是否会触发 textchnaged 事件。确实如此。所以我需要动态传递 cliendid 值，其中 cliendID 包含 dte。

我已经搜索过，但没有找到合适的答案。

请帮忙！谢谢

【问题讨论】：

标签： javascript c# jquery asp.net

【解决方案1】：

您可以为每个控件存储ClientID 以供以后在某处使用。

List<string> dynamicID = new List<string>();
dynamicID.Add(dte.ClientID);

或者给你的控件自制 ID 并将 ClientID 模式设置为静态，这样它们就不会被 aspnet 重命名为MainContent_ID_5

dte.ID = "ID_" + index;
dte.ClientIDMode = ClientIDMode.Static;

或向下导航控件路径并找到正确的 ID，在此示例中，TextBox 作为第一个控件添加到 PlaceHolder1。

<%= PlaceHolder1.Controls[0].ClientID %>

【讨论】：

【解决方案2】：

on change 函数应该自动引用触发它的动态控件。

alert(ev.target.id);

是一种方式，您应该看到 id。

$(this).attr("id");

或

this.id

还应分别包含动态 id。如果您对 CliendID 的定义意味着除了在事件中触发的控件之外的其他内容，那么您应该指定它是什么以及它如何唯一地与更改事件相关联。

【讨论】：

添加以上行工作正常。但是，虽然在 ChangeDate 上给出 _doPostBack 是每次我更改/清除日期而不是关闭时添加另一个日期选择器。如果我注释掉 _doPostBack，datepicker 可以正常工作。但我应该回发并调用 textchanged 方法。调用代码隐藏方法的好方法是什么。如何修改？
那时我有点困惑，需要从您的代码中查看更多代码。每次调用 _doPostBack 它都会创建一个新的日期选择器？这是你想要的行为吗？在您的 PageLoad() 后面的代码中创建日期选择器的代码 sn-p 是吗？如果这是使用 Page.IsPostBack 的回发，您可以检查后面的代码，如果是 PostBack，您可以有条件地说不要创建另一个日期选择器。在页面加载时服务端，您也可以使用类似这样的代码获取回发参数 string parameter = Request["__EVENTARGUMENT"];
是的，它会创建一个新的附加日期选择器。我不需要那种行为。我已经为 datepicker 文本框控件添加了代码。请找到并提出建议！谢谢

【解决方案3】：

假设您在容器中有按钮。

<div class='ButtonContainer'>
<button value="textChanges" id="MainContent_dteFr1002" />
</div>
<input type="text" class='datepicker' value='2017-05-01' />

那么你的事件可能看起来像这样

$(".datepicker").datepicker({
    format: 'mm/dd/yyyy',
    autoclose: true,
    todayBtn: 'linked'
}).on('changeDate', function (ev) { 
   $(".ButtonContainer").find("button").click();
}).on('clearDate', function (ev) {
    //to do
});

 //OR text changed on the same controller

$(".datepicker").datepicker({
format: 'mm/dd/yyyy',
 autoclose: true,
 todayBtn: 'linked'
}).on('changeDate', function (ev) { 
// (this) is the changes textbox
var id = $(this).attr("id");
 __doPostBack(id, '');
}).on('clearDate', function (ev) {
                //to do
 });

【讨论】：