Question

我遇到了无法解决的jQuery问题。我通过使用jQuery动态追加表行来生成表主体。我创建了一个演示该问题的示例：

var i = 0;

function addStuff() {
  $('#table-body').append("<tr class=\"log-entry-row\"><td class=\"description\">item" + i + "</td><td class=\"sometext\">item" + i + "</td></tr>");
  i++;
}


$("#table-body").on("click", ".log-entry-row", function() {
  var text = $(this).find(".sometext")[0].innerHTML();
  console.log($(this).find(".sometext")[0].innerHTML);
  $('#clickedCell').innerHTML(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="table-body">

  </tbody>
</table>

<button onclick="addStuff();">ADD ENTRY</button>
<span id="clickedCell"></span>

https://codepen.io/anon/pen/WKOzYN

无论我如何尝试，我都无法正常工作。愚蠢的是，将其记录到控制台可以正常工作。

有人可以解释发生了什么吗？

Answer 1

问题是由

引起的

$('#clickedCell').innerHTML(text)

innerHTML是属性，而不是方法，可以改为使用html()。

$('#clickedCell').html(text)

Answer 2

问题是因为您试图在没有该功能的jQuery对象上调用innerHTML()。改用jQuery的html()方法：

var i = 0;

$('button').click(function() {
  $('#table-body').append('<tr class="log-entry-row"><td class="description">item' + i + '</td><td class="sometext">item' + i + '</td></tr>');
  i++;
});

$("#table-body").on("click", ".log-entry-row", function() {
  var text = $(this).find(".sometext").html();
  $('#clickedCell').html(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="table-body"></tbody>
</table>

<button>ADD ENTRY</button>
<span id="clickedCell"></span>

还请注意，如果使用'来分隔字符串，则无需在该字符串中转义"字符。最好不加干扰地附加事件处理程序，而不要使用过时的on*事件属性。

jQuery动态表请点击

2 个答案: