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');
    },
  });
}

我想在這個按鈕上調用刪除 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 我打電話說按鈕是這個

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 按鈕單擊事件未觸發

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

在您的情況下發生的事情是您試圖為異步加載的內容觸發事件。 在這些情況下，您需要根據其 static 父元素編寫事件。

• 您不應該為不同的元素使用唯一 ID（用作 class。這里我使用名稱屬性來觸發調用）。
• 添加了 return false 以避免默認的 HTML 表單提交行為。

以下代碼將幫助您解決問題。

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