我有一个表单,其中的一部分需要通过 javascript 动态克隆,以允许用户输入其他详细信息。一切正常,除非被克隆的文本框之一附加了 CalendarExtender 用于日期选择。文本框被克隆,但日历扩展器不是,因为它显然不作为 DOM 中的元素存在,并且事件没有直接附加到被克隆的文本框。
因此,我正在寻找一种方法来确定,最好是通过检查文本框本身的某些属性,是否附加了日历扩展器。或者,如果有某种方法可以检查文本框 id 的扩展器集合等。然后我可以向克隆的文本框添加新行为。
任何关于在哪里可以找到这些数据的建议将不胜感激。谢谢。
更新,示例
这是我正在使用的 asp.net ajax calendarExtender,该页面有使用它的实时示例。(我相信您也可以从该站点下载该工具包。)
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx
我将在这里提供我正在使用的代码的简化版本(删除页面上的所有内容,除了有问题的控件。)
在 ASP.Net 页面上,我有一个表格,其中包含一个带有日历扩展器的文本框。正如您在此处看到的,它是引用文本框的日历扩展器的属性,因此文本框在服务器端没有特殊属性。
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<table>
<tr>
<td>
<asp:TextBox ID="txtDateFrom" runat="server" />
<ajx:CalendarExtender ID="calFrom" runat="server" TargetControlID="txtDateFrom" Format="dd/MM/yyyy" />
</td>
</tr>
</table>
</asp:Content>
呈现的客户端 HTML 如下所示。如您所见,表中没有任何内容表明日历扩展器的存在,它仅作为页面中最后一件事生成的脚本存在。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...</head>
<body>
<form method="post" action="Default.aspx" id="ctl101">
<table>
<tr>
<td>
<input name="ctl00$MainContent$txtDateFrom" type="text" id="txtDateFrom">
</td>
</tr>
</table>
...
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"calFrom"}, null, null, $get("txtDateFrom"));
});
//]]>
</script>
</form>
</body>
</html>
用于克隆表行的javascript如下:
function addRow(tr) {
var cl = tr.cloneNode(true);
cl.style.display = "table-row";
for (var i = 0; i < cl.cells.length; i++)
if (cl.cells[i].firstChild) {
cl.cells[i].firstChild.value = ""; // reset inputs
if (cl.cells[i].firstChild.id.match(/date/i)) // check & add calendar extender
$create(Sys.Extended.UI.CalendarBehavior, { "format": "dd/MM/yyyy", "id": "cal"+tr.rowIndex }, null, null, cl.cells[i].firstChild);
}
tr.parentNode.insertBefore(cl, tr.nextSibling);
}