删除和编辑按钮不起作用

Question

我正在创建一个粗糙的应用程序，其中包含一系列学生及其成绩，我试图在前端进行删除和编辑的方法，并且当我单击“编辑”时，他们应该是出现的弹出表格以及何时出现点击删除他们应该是一条消息，说你想删除这个

$('#studentUpdate').click(function(a) {
  a.preventDefault();
  let update = {
    _id: $($("#updateForm")[0].int).val(),
    role_num: $($("#updateForm")[0].role_num).val(),
    first_name: $($("#updateForm")[0].first_name).val(),
    last_name: $($("#updateForm")[0].last_name).val(),
    marks: $($("#updateForm")[0].marks).val(),
  }

  $("#updateForm").trigger("reset");
  $("#updateForm").toggle();

  $.ajax({
    url: "http://localhost:3200/students/updateStudent",
    method: 'PUT',
    dataType: 'json',
    data: update,
  }).always(function(data) {
    console.log(data);
    showStudents();
  });
});

$("body").on('click', 'deleteStudent', function(a) {
a.preventDefault();
var student_id = $(this).data('student_id');
console.log(a);
$.ajax({
  url: "http://localhost:3200/students/deleteStudent" + student_id,
  method: 'DELETE',
  dataType: 'json',
}).always(function(data) {
  console.log(data);
  showStudents();
  confirm("You want to delete this");
});
});
});

function showStudents() {
  $.ajax({
    method: "GET",
    url: "http://localhost:3200/students",
    dataType: "json",
    success: function(response) {
      $('#students').empty();
      $.each(response, function(i, student) {
        const text = "<tr>" +
          "<td>" + student._id + "</td>" +
          "<td>" + student.role_num + "</td>" +
          "<td>" + student.first_name + "</td>" +
          "<td>" + student.last_name + "</td>" +
          "<td>" + student.marks + "</td>" +
          "<td>" + "<button button type=\"button\" class=\"btn btn-danger deleteStudent\"  data-studentid=" + student._id + ">Delete</button>" + "</td>" +
          "<td><button type='button' class='btn btn-danger edit-student' data-toggle='modal' data-target1='#exampleModal2' data-studentid=" + student._id + ">Edit</button></td>";
        $("#students").append(text);
      });
    }
  });
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="editStudentModal2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">Update Student</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
      </div>
      <div class="modal-body">
        <form id="updateForm">
          <div class="form-group row">
            <label for="id" class="col-sm-2 col-form-label">ID</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="student_id">
            </div>
          </div>
          <div class="form-group row">
            <label for="role_num" class="col-sm-2 col-form-label">Role Number</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="role_num">
            </div>
          </div>
          <div class="form-group row">
            <label for="first_name" class="col-sm-2 col-form-label">First Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="first_name">
            </div>
          </div>
          <div class="form-group row">
            <label for="last_name" class="col-sm-2 col-form-label">Last Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="last_name">
            </div>
          </div>
          <div class="form-group row">
            <label for="marks" class="col-sm-2 col-form-label">Marks</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="Marks">
            </div>
          </div>

          <button type="button" class="btn btn-secondary" data-dismiss="modal">End</button>
          <button id="studentUpdate" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal2>Update Student
                          </button>
        </form>

      </div>
    </div>
  </div>
</div>

所以我不知道我在这里缺少什么，可能是我的ID标签有误，或者是我的jquery中有问题。另外，当我单击“编辑和删除”按钮时，什么也没发生

Answer 1

没有名为<deleteStudent/>的标签，请使用.deleteStudent之类的类选择器进行选择

$('#studentUpdate').click(function(a) {
    a.preventDefault();
    let update = {
      _id: $($("#updateForm")[0].int).val(),
      role_num: $($("#updateForm")[0].role_num).val(),
      first_name: $($("#updateForm")[0].first_name).val(),
      last_name: $($("#updateForm")[0].last_name).val(),
      marks: $($("#updateForm")[0].marks).val(),
    }

    $("#updateForm").trigger("reset");
    $("#updateForm").toggle();

    $.ajax({
      url: "http://localhost:3200/students/updateStudent",
      method: 'PUT',
      dataType: 'json',
      data: update,
    }).always(function(data){
          console.log(data);
          showStudents();
     });
 });

  $(document).on('click', '.deleteStudent', function(a) { //Please look closely here
    a.preventDefault();
    var student_id = $(this).data('student_id');
    console.log(a);
    $.ajax({
       url: "http://localhost:3200/students/deleteStudent" + student_id,
      method: 'DELETE',
      dataType: 'json',
   }).always(function(data){
           console.log(data);
           showStudents();
              confirm("You want to delete this");
   });
});

function showStudents() {
$.ajax({
  method: "GET",
  url: "http://localhost:3200/students",
  dataType: "json",
  success: function(response) {
    $('#students').empty();
    $.each(response, function(i, student) {
      const text = "<tr>" +
        "<td>" + student._id + "</td>" +
        "<td>" + student.role_num + "</td>" +
        "<td>" + student.first_name + "</td>" +
        "<td>" + student.last_name + "</td>" +
        "<td>" + student.marks + "</td>" +
        "<td>" + "<button button type=\"button\" class=\"btn btn-danger deleteStudent\"  data-studentid=" + student._id + ">Delete</button>" + "</td>" +
        "<td><button type='button' class='btn btn-danger edit-student' data-toggle='modal' data-target1='#exampleModal2' data-studentid=" + student._id + ">Edit</button></td>";
      $("#students").append(text);
    });
  }
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="editStudentModal2"
       aria-hidden="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel2">Update Student</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                <form id="updateForm">
                      <div class="form-group row">
                        <label for="id" class="col-sm-2 col-form-label">ID</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="student_id">
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="role_num" class="col-sm-2 col-form-label">Role Number</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="role_num">
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="first_name" class="col-sm-2 col-form-label">First Name</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="first_name">
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="last_name" class="col-sm-2 col-form-label">Last Name</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="last_name">
                          </div>
                      </div>
                      <div class="form-group row">
                          <label for="marks" class="col-sm-2 col-form-label">Marks</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="Marks">
                          </div>
                      </div>

                      <button type="button" class="btn btn-secondary" data-dismiss="modal">End</button>
                      <button id="studentUpdate" type="button" class="btn btn-primary" data-toggle="modal"
                              data-target=#exampleModal2>Update Student
                      </button>
                  </form>

              </div>
          </div>
      </div>
  </div>