Question

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

我有一个datepicker，如果值更改，它应该触发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();
    });

动态生成的文本框Datepicker的代码隐藏

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＆＃39; MainContent_dteFr1002＆＃39;进行了硬编码。看看它是否会触发文本结构事件。确实如此。所以我需要动态传递cliendid值，cliendID包含dte。

我搜索过，但我找不到合适的答案。

请帮忙！感谢

Answer 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 %>

Answer 2

on更改功能应自动引用触发它的动态控件。

alert(ev.target.id);

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

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

或

this.id

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

Answer 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
 });

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

3 个答案: