Question

我有一个表，我正在动态添加行，每个行都有2个单元格，其中一个将包含一个输入字段，我计划使用DatePicker UI来显示选择日期。当我添加新行时，问题出现了，单元格和所有内容都添加得很好，但输入字段在我点击它时不会显示DatePicker。阅读我知道我应该使用“事件委托”，因为新元素从一开始就没有加载。但是对于我的生活，我无法理解如何去做，如果有人可以指出我的方向很好。感谢

到目前为止我得到的代码：

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

Answer 1

$( "#TheTable" ).on("change",".datepicker",function() {

这应该有用。

.on()通过侦听父元素来处理冒泡的事件（see here for explanation of bubbling - 第一段），以便新元素触发的事件冒泡到父级正在倾听。

作为旁注，我想提一下，听一下所需元素的最低公共父是个好主意，否则jQuery会评估不必要的事件。

请参阅jQuery docs for .on()

以下是.on()文档的要点：

.on( events [, selector ] [, data ], handler(eventObject) )

大多数浏览器事件从文档中最深，最内层的元素（事件目标）冒泡或传播，一直到身体和{{1}元素。在Internet Explorer 8及更低版本中，document和change等一些事件本身不会冒泡，但jQuery会将这些事件修补为泡泡并创建一致的跨浏览器行为。

如果省略submit或为null，则事件处理程序称为 direct 或直接绑定。每次在所选元素上发生事件时都会调用该处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡。

提供selector时，事件处理程序称为委派。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素;在您的代码调用 selector

时，它们必须存在于页面上

Answer 2

您需要监听父级才能定位动态绘制的内容。替换：

$(document).ready(function() {
  $( ".datepicker" ).datepicker();
  $( ".datepicker" ).on("change",function() {
    $( ".datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  });
});

使用：

$(document).ready(function() {
  $( ".datepicker" ).datepicker();
  $( '#TheTable' ).on("change",'.datepicker',function() {
    $( this ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  });
});

Answer 3

您不需要事件委托;只需在开头设置您的选项。然后，在您的函数中，在添加新元素时触发datepicker方法（带有所需选项）。

$(".datepicker").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';
    $('<input type="text" class="datepicker"/>')
        .datepicker("option", "dateFormat", "yy-mm-dd")
        .appendTo(cell2);
}

动态添加到DOM的对象不响应jQuery事件

3 个答案: