从生成的html表中选择一行[重复]答案

【问题标题】：Select a row from a generated html table [duplicate]从生成的html表中选择一行[重复]
【发布时间】：2015-09-20 11:05:22
【问题描述】：

在stack 中，有一个解决方案可以使用 jQuery 从表中选择并突出显示整行。当我单击表格上的一行时，我有一个回调（请参阅我的脚本底部）。问题是我的表是从数据生成的，因此回调不适用于生成的单元格。回调适用于未生成的标头。

如何将现有的回调附加到新生成的元素上？

<style>
.selected {
  background-color: brown;
  color: #FFF;
}
</style>

<body>
<table id="table" border="1" ContentEditable>
  <tbody id="tablebody">                      
    <tr>
      <th>Date</th>
      <th>Number</th>
    </tr>                      
  </tbody>
</table>
<button onclick="generateTable()">generateTable</button>

<script>
function generateTable() {
  var tbl = document.getElementById('table')
  var tbdy = document.getElementById('tablebody')
  //Table elements
  var arr={Date: "my date", Number:"my number"}
  var tr = document.createElement('tr');
  for (el in arr) {      
    var td = document.createElement('td');
    var t = document.createTextNode(arr[el]);
    td.appendChild(t);
    tr.appendChild(td);
  }
  //append line to tbody
  tbdy.appendChild(tr);
  tbl.appendChild(tbdy);
}


jQuery("#table tr").click(function(){
  console.log("this works only when clocking on the headers <th>")
  jQuery(this).addClass('selected')
    .siblings().removeClass('selected');
});

【问题讨论】：

您是否尝试将 jQuery("#table tr").click(function()... 更改为：jQuery("#table tr").on('click', function( )..
@ItayB 完全一样。
@epascarello 委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。来自：api.jquery.com/on
@ItayB 我知道什么是委托事件，而你的不是委托事件。
@aless80 或使用委托事件，您不必这样做。

标签： javascript jquery html

【解决方案1】：

这是event delegation 模式的完美用例。也就是说，不是在每个元素（在您的情况下，每个表格行）上定义回调，而是在父元素（表格）上定义点击回调。

这样，当点击事件发生时，会冒泡dom树，父元素可以响应。

例子：

// Attach a delegated event handler
$( "#table" ).on( "click", "tr", function( event ) {
    event.preventDefault();
    ...
});

这允许我们为所有当前和未来的表行附加一个单击事件处理程序。

【讨论】：

谢谢，比我的解决方法好多了。不过有一个问题：我会研究事件是如何工作的，但我需要 event.preventDefault() 吗？