Jquery AJAX DELETE 请求也在同一表单上触发 POST 请求

Question

我有一个包裹在桌子周围的表格

                <form id="project-form">
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">


                        </tbody>
                    </table>
                </form>

此表通过 AJAX GET 请求填充

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    url: 'http://localhost/WBS/php/api/requests/get.php?function=project',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          console.log(value);
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid  value="${value.projectid}">
                  ${value.projectid}
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName" value="${value.title}">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description"  value="${value.description}">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime"  value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime"  value="${value.Actual_time}">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger" value="${value.projectid}" >
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

我想在这个按钮点击时调用删除函数

               <button type="submit" id="deleteProject" name="deleteProject" class="btn btn-danger" >
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>

我在所述按钮上调用的功能是这个

function deleteProject() {
  let id = $(this).find('#projectid').val();

  $.ajax({
    type: 'DELETE',
    url: 'http://localhost/WBS/php/api/requests/delete.php',
    data: { id: id },
    success: () => {
      $('#alertDanger').fadeIn(() => {
        setTimeout(() => {
          $('#alertDanger').fadeOut();
        }, 5000);
      });
    },
    error: () => {
      $('#alertDangerFailed').fadeIn(() => {
        setTimeout(() => {
          $('#alertDangerFailed').fadeOut();
        }, 5000);
      });
    },
  });
}

在 document.ready 中我处理 onclick 事件

  $('#deleteProject').on('click', () => {
    deleteProject();
  });

现在当我点击deleteproject按钮时问题就来了，因为我的表单也可以上传新项目，deleteproject提交事件也会触发绑定在这个onclick事件下的POST调用

  $('#saveProjects').on('click', () => {
    uploadProjects();
  });

编辑：通过使用此修复它

  $(document).on('click', '#deleteProject', () => {
    deleteProject();
  });

作为 onclick 处理程序来自 -> Jquery button click event not firing

Answer 1

正如Kohaku 回答的那样，这是<button type="submit"></button 的默认行为，因此您必须以某种方式阻止它。一种可能的解决方案是将按钮类型从submit 更改为button，应该是这样的：

<button type="button" id="deleteProject" name="deleteProject" class="btn btn danger">
   <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>

Answer 2

正如您所提到的，这是尝试处理默认提交行为的表单，在这种情况下，您不需要。

您可以使用preventDefault() 方法覆盖它：

$('#deleteProject').on('click', (e) => {
    e.preventDefault();
    deleteProject();
});

艾莉森的答案实际上是更清洁的选择，因为它在问题出现之前解决了问题https://stackoverflow.com/a/61432452/4801692

Answer 3

在您的情况下发生的事情是您试图为异步加载的内容触发事件。在这些情况下，您需要根据其静态父元素编写事件。

• 你不应该为不同的元素使用唯一ID（用作类。这里我使用名称属性来触发调用）。
• 添加了 return false 以避免默认的 HTML 表单提交行为。

以下代码将帮助您解决问题。

$('#project-form').on('click', '[name=deleteProject]', () => {
  deleteProject();
  return false;
});