Question

我有一张桌子，每排都有一个班级＆＃34; .clickablerow＆＃34;当我点击这一行时我定义了onclick函数，会出现一个对话框，然后我可以在一些文本的上方或下方插入新行。问题是，虽然我已经添加了＆＃34; .clickablerow＆＃34;对于这些新添加的行，它们实际上是不可点击的，并且没有显示这样的对话框。

我的代码就像：

JS：

$(document).ready(function() {
        $(".clickable-row").click(function(){

           var i = $(this).rowIndex;
           var html = "<tr class='clickable-row' > <td> a test </td></tr>";

           $('#table_id > tbody > tr').eq(i).after(html);
});

HTML：

<head>
...
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/jquery.expander.min.js" type="text/javascript"></script>
    <script src="./static/js/main.js" type="text/javascript"></script>
....
<head>

<body>
....
  <table>
      <tbody>
         <tr class='clickable-row' >
          <td style="border: 0;"> Initial message ....</td>
         </tr>
      </tbody>
</table>
....
</body>

如果我点击该行，则会显示一个新行，其中包含类＆＃39;可点击行＆＃39;但是，将添加新行不可点击。欢迎任何想法！感谢

Answer 1

只需delegate the click event <table>或<tbody>：

const tableBody = document.getElementById('tableBody');

tableBody.onclick = (e) => {
  const target = e.target;
  
  let row = target;
  
  while (!row.classList.contains('clickable-row') && row !== tableBody) row = row.parentElement;
  
  if (row === tableBody) {
     return; // Ignore the click if we could not find a .clickable-row
  }

  const newRow = tableBody.insertRow(target.rowIndex);

  newRow.className = Math.random() < 0.5 ? 'clickable-row' : 'disabled-row';
  newRow.innerHTML = '<td>...</td>';
};

table {
  font-family: monospace;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  user-select: none;
}

tr.disabled-row {
  background: #EEE;;
}

tr.clickable-row {
  cursor: pointer;
}

tr.clickable-row:hover {
  background: yellow;
}

td {
  border: 2px solid black;
  padding: 8px 4px;
}

<table>
  <tbody id="tableBody">
    <tr class="clickable-row"><td>...</td></tr>
  </tbody>
</table>

使用jQuery，您可以使用.on()：

委派事件的优势在于，他们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

除了能够处理尚未创建的后代元素上的事件之外，委派事件的另一个优点是，当必须监视许多元素时，它们可能会有更低的开销。在其tbody中包含1,000行的数据表中，此示例将处理程序附加到1,000个元素：
$( "#dataTable tbody tr" ).on( "click", function() {
    console.log( $( this ).text() );
});
事件委托方法只将一个事件处理程序附加到一个元素tbody，而事件只需要向上冒一个级别（从点击的tr到tbody）：
$( "#dataTable tbody" ).on( "click", "tr", function() {
    console.log( $( this ).text() );
});

之前的示例如下所示：

$('#tableBody').on('click', '.clickable-row', (e) => {
  $(e.currentTarget).after(`<tr class=${ Math.random() < 0.5 ? 'clickable-row' : 'disabled-row' }><td>...</td></tr>`);
});

table {
  font-family: monospace;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  user-select: none;
}

tr.disabled-row {
  background: #EEE;;
}

tr.clickable-row {
  cursor: pointer;
}

tr.clickable-row:hover {
  background: yellow;
}

td {
  border: 2px solid black;
  padding: 8px 4px;
}

<table>
  <tbody id="tableBody">
    <tr class="clickable-row"><td>...</td></tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

创建＆＃34;委派＆＃34;使用on()进行绑定。

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

＆＃13;

$('#table_id').on('click', '.clickable-row', function() {

  debugger;
  var i = this.rowIndex;
  var html = "<tr class='clickable-row' > <td> a test " + i + "</td></tr>";

  $('#table_id > tbody > tr').eq(i).after(html);
});

＆＃13;

table#table_id {
  border-collapse: collapse;
}

#table_id tr {
  background-color: #eee;
  border-top: 1px solid #fff;
}

#table_id tr:hover {
  background-color: #ccc;
}

#table_id th {
  background-color: #fff;
}

#table_id th,
#example td {
  padding: 3px 5px;
}

#table_id td:hover {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_id">
  <tbody>
    <tr class='clickable-row' data-href='url://'>
      <td style="border: 0;"> Initial message ....</td>
    </tr>
  </tbody>
</table>

＆＃13;

如何在html表中启用新添加的行可点击？

2 个答案: