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

我有一个表,我正在动态地添加行,每个行都有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>

解决方法:

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

这应该工作.

.on()通过监听父元素来查找冒泡的事件(see here for explanation of bubbling – 第一段),以便新元素触发的事件冒泡到正在被侦听的父元素.

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

见jQuery docs for .on()

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

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

大多数浏览器事件从文档中最深的,最里面的元素(事件目标)起泡或传播,它们一直发生到正文和文档元素.在Internet Explorer 8及更低版本中,诸如更改和提交之类的一些事件本身不会冒泡,但jQuery会将这些事件修补为冒泡并创建一致的跨浏览器行为.

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

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

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on()时页面上

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

相关推荐