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

в документе. Я уже обработал событие onclick

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

Теперь проблема приходит, когда я нажимаю на кнопку deleteproject, так как моя форма имеет возможность также загружать новые проекты, событие submitproject delete также запускает вызов POST, связанный с этим событием onclick

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

EDIT: исправлено с помощью этого

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

в качестве обработчика onclick из -> Jquery событие нажатия кнопки не запускается

Answer 1

Как ответил Кохаку , это поведение по умолчанию <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

В вашем случае произошло то, что вы пытаетесь вызвать событие для асинхронно загруженного контента. В этих случаях вам нужно записывать события, основываясь на его родительском элементе stati c.

• Не следует использовать уникальный идентификатор для разных элементов (используйте как класс. Здесь я использовал атрибут name, чтобы вызвать вызов ).
• Добавлен возврат false, чтобы избежать поведения при отправке формы по умолчанию HTML.

Следующий код поможет вам решить проблему.

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

Answer 3

Как вы упомянули, эта форма пытается обработать поведение отправки по умолчанию, которое в данном случае вам не требуется.

Это можно переопределить с помощью метода preventDefault():

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

Ответ от Элисон на самом деле более чистый, поскольку он решает проблему до ее появления { ссылка }