Question

目前，我在bootstrap 4模态窗口中有静态html表。页面打开后，我用一些用服务器上的ajax get调用检索的数据填充表。

成功后，我将数据包装在<td>和<tr>标记中，并将整个结构附加到表的<tbody>中。现在，我添加到表中的一件事是一些<a>链接。我想以某种方式引用该元素。更准确地说，我正在尝试创建一些事件处理程序，但未成功，它不起作用
这是一些代码片段，首先是jQuery中的事件处理程序，其次是我的函数，该函数检索数据并动态构建我的tbody内容。

我试图通过Google搜索此案，但没有运气，希望有人能提供帮助。

$("#deleteLink").on(click, function() {
    var idVersionNote = this.attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

function getNotes(idVersion) {
  var url = /*[[@{/notes/getNotes/}]]*/ '';
  url += idVersion;
  $.ajax({
    url: url,
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data) {
      /*console.log(data);*/
      var append_data = '';
      $.each(data, function(index, value) {
        /*console.log(value);*/
        append_data += '<tr>';
        append_data += '<td>' + value.user.loginUser+ '</td>';
        append_data += '<td>' + value.versionNote.tstampCreation+ '</td>';
        append_data += '<td>' + value.versionNote.tstamp + '</td>';
        append_data += '<td>' + value.versionNote.note + '</td>';
        append_data += '<td><a href="#" id="deleteLink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'
        append_data += '</tr>';
      });
      $(".notesTable tbody").append(append_data);
    },
    error: function(d) {
      /*console.log("error");*/
      alert("Error");
    }
  });
}

Answer 1

您不能为多个元素使用相同的ID。另外，事件处理程序不起作用，因为链接元素在创建时不存在。使用类似这样的方法将事件处理程序附加到tbody内的链接，即使它们稍后创建：

$(".notesTable tbody").on("click", "a", function() {
    var idVersionNote = $(this).attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

它称为event delegation。如果这样操作，则不需要链接的ID，因此只需删除id="deleteLink"，这还是有问题的。

Answer 2

我看到的问题：

1）您正在以下行中创建具有相同id 的多个HTML元素：

append_data += '<td><a href="#" id="deleteLink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'

引用此post：

大多数（如果不是全部）浏览器都具有并且仍会选择第一个元素调用getElementById
时具有给定ID的对象

这将导致意外的结果，因此，您应该首先解决此问题，一种可能的解决方案是将id更改为class，就像这样：

append_data += '<td><a href="#" class="deletelink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'

2）创建事件处理程序时，该元素不在DOM中。

以下代码行将永远无效：

$("#deleteLink").on(click, function() {
    var idVersionNote = this.attr("data-note-id");
    deleteVersionNote(idVersionNote);
});

由于在运行代码时#deleteLink不存在，因此#deleteLink仅在ajax成功后才被附加到DOM。因此，您仅应在元素实际存在后之后创建此事件处理程序。

解决方案：

在添加HTML之后，修复1）中提到的id问题，并将事件处理程序移回ajax.success内，如下所示：

success: function(data) {
  /*console.log(data);*/
  var append_data = '';
  $.each(data, function(index, value) {
    /*console.log(value);*/
    append_data += '<tr>';
    append_data += '<td>' + value.user.loginUser+ '</td>';
    append_data += '<td>' + value.versionNote.tstampCreation+ '</td>';
    append_data += '<td>' + value.versionNote.tstamp + '</td>';
    append_data += '<td>' + value.versionNote.note + '</td>';
    append_data += '<td><a href="#" class="deletelink" data-note-id="' + value.versionNote.idVersionNote + '"">Delete note</a></td>'
    append_data += '</tr>';
  });
  $(".notesTable tbody").append(append_data);
  $(".deletelink").on(click, function() {
     var idVersionNote = this.attr("data-note-id");
     deleteVersionNote(idVersionNote);
  });

Answer 3

将类而不是id添加到附加对象中。

theano.tensor

然后，侦听类的点击事件；

[x_i]

在ajax

3 个答案: