Question

我制作了一个由JSON对象生成的表，每一行都有一个编辑和删除链接，该链接指向/ editstudent？id = idOfStudent和/ deletestudent？id = idOfStudent之类的东西。

我现在正在尝试使编辑/删除链接起作用。在<a>元素内，我插入了<i>图标。

我想为所有删除的<a>元素添加一个Confirm（），但是它不起作用。

这似乎是因为我在调用<a>元素的类而感到困惑。我在HTML正文中的其他位置放置了另一个带有<a>图标的<i>元素，并使用Id对其进行了调用。

但是，如果我用类名来调用它，那是行不通的。我需要用类名来调用它（因为该表是自动生成的，并且可能有很多行）。

$(document).ready(function() {
  var studJSONPath = "https://api.myjson.com/bins/nlr57";
  $.getJSON(studJSONPath, function(result) {
    let html = "";
    $.each(result, function(objectKey) {
      html += '<tr>';
      html += '<th scope="row" hidden>' + result[objectKey].id + '</th>';
      html += '<td>' + result[objectKey].name + '</td>';
      html += '<td>' + result[objectKey].surname + '</td>';
      html += '<td>' + result[objectKey].dob + '</td>';
      html += '<td>' + result[objectKey].fees + '</td>';
      html += '<td><a class="js-edit-btn" href="/editstudent?id=' + result[objectKey].id + '"><i class="far fa-edit fa-2x"></i></a></td>';
      html += '<td><a class="js-delete-btn" href="/deletestudent?id=' + result[objectKey].id + '"><i class="far fa-minus-square fa-2x"></i></a></td>';
    });
    $('#tableBody').append(html);
  });

  $('#jseditbtn').on('click', function() {
    return confirm("Do you really want to delete this student?");
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <table class="table table-hover">
    <thead class="thead-dark">
      <tr>
        <th scope="col" hidden>id</th>
        <th scope="col">Name</th>
        <th scope="col">Surname</th>
        <th scope="col">Date of birth</th>
        <th scope="col">Fees</th>
        <th scope="col">Edit</th>
        <th scope="col">Delete</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <!-- table data from JSON-->
    </tbody>
  </table>
</div>

为什么用类名调用confirm（）方法不起作用？

0 个答案: