我有一个表，并且在其中动态添加行，每行将有2个单元格，其中一个将包含一个输入字段，我计划在其中使用DatePicker UI来选择一个日期。当我添加新行，单元格以及所有内容时，问题就来了，但是当我单击它时，输入字段以某种方式不显示DatePicker。仔细阅读后，我了解到应该使用“事件委托(delegate)”，因为新元素不是从一开始就加载的。但是对于我的一生来说，如果有人可以向我指出正确的方向，那我将无法理解如何做到这一点，那太好了。谢谢
到目前为止，我得到的代码:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$( ".datepicker" ).datepicker();
$( "#TheTable" ).on("change",".datepicker",function(){
$( this ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});
});
function addRow() {
var table = document.getElementById("TheTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML='Date';
cell2.innerHTML='<input type="text" class="datepicker"/>';
}
</script>
</head>
<body>
<table name="MyTable" id="TheTable">
<tr>
<td>Date</td>
<td><input type="text" class="datepicker" /></td>
</tr>
<tr>
<td>Date</td>
<td><input type="text" class="datepicker" /></td>
</tr>
</table>
<input type="button" onClick="return addRow()" value ="Add Another Date">
</body>
</html>
最佳答案
$( "#TheTable" ).on("change",".datepicker",function() {
这应该工作。
.on()通过侦听父元素来冒泡的事件(see here for explanation of bubbling-第一段)来工作，以便新元素触发的事件冒泡到正在侦听的父对象。附带说明一下，我想提一下，监听所需元素的最低公共(public)父元素是个好主意，否则jQuery将评估不必要的事件。
参见jQuery docs for
.on() 以下是
.on()文档的重点:.on( events [, selector ] [, data ], handler(eventObject) )大多数浏览器事件从文档中最深的最里面的元素(事件目标)冒泡或传播，一直发生到正文和
document元素。在Internet Explorer 8及更低版本中，诸如change和submit之类的一些事件本身并不冒泡，但是jQuery修补了这些事件以冒泡并创建一致的跨浏览器行为。如果
selector省略或为null，则事件处理程序称为直接或直接绑定(bind)。每当事件在选定元素上发生时，无论事件是直接发生在元素上还是来自后代(内部)元素的气泡，都将调用处理程序。提供
selector时，事件处理程序称为“委托(delegate)”。当事件直接发生在绑定(bind)元素上时，不调用处理程序，而仅对与选择器匹配的后代(内部元素)进行调用。 jQuery将事件从事件目标一直冒泡到附加了处理程序的元素(即最里面到最外面的元素)，然后沿该路径运行与选择器匹配的任何元素的处理程序。事件处理程序仅绑定(bind)到当前选定的元素；在您的代码调用
.on()时，它们必须存在于页面上