jQuery 的 $.ajax 方法不适用于 JavaScript confirm() 方法答案

【问题标题】：jQuery's $.ajax method does not work with JavaScript confirm() methodjQuery 的 $.ajax 方法不适用于 JavaScript confirm() 方法
【发布时间】：2018-05-13 10:00:08
【问题描述】：

我正在使用 Codeigniter 3.1.8 和 Bootstrap 4 开发一个基本的博客应用程序。

该应用程序具有删除帖子功能。我被困在通过 jQuery 的 $.ajax 方法删除帖子。

帖子视图如下所示：

<table class="table table-striped table-sm border-0">
  <thead>
    <tr>
      <th>#</th>
      <th class="w-50">Title</th>
      <th>Publication date</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($posts as $index => $post): ?>
    <tr id="<?php echo $post->id; ?>">
      <td class="text-right"><?php $count = $index + 1; echo $count + $offset; ?></td>
      <td><?php echo $post->title; ?></td>
      <td><?php echo nice_date($post->created_at, 'D, M d, Y'); ?></td>
      <td class="text-center">
        <div class="btn-group btn-group-sm" role="group">
          <a href="<?php echo base_url('posts/post/') . $post->id; ?>" class="btn btn-success"><i class="fa fa-eye"></i> View</a>
          <?php if($this->session->userdata('is_logged_in') && $this->session->userdata('user_id') == $post->author_id) : ?>
          <a href="<?php echo base_url('posts/edit/') . $post->id; ?>" class="btn btn-success"><i class="fa fa-pencil-square-o"></i> Edit</a>
          <a href="#" id="delete_post" data-id="<?php echo $post->id ?>" class="ajax-btn btn btn-success"><i class="fa fa-trash"></i> Delete</a>
          <?php else: ?>
          <a href="#" class="btn btn-success disabled"><i class="fa fa-pencil-square-o"></i> Edit</a>
          <a href="#" id="delete_post" class="btn btn-success disabled"><i class="fa fa-trash"></i> Delete</a>
          <?php endif; ?>
        </div>
      </td>
    </tr>
    <?php endforeach ?>
  </tbody>
</table>

jQuery 用于通过 $.ajax 延迟帖子：

//Delete Posts
$('#delete_post').on('click', function(evt){
    evt.preventDefault();
    var deleteUrl = $(this).attr('href');
    var id = $(this).data('id');

    if(confirm('Delete this post?')) {
      if ($(this).hasClass("ajax-btn")) {
        $.ajax({
          url: 'posts/delete/' + id,
          method: 'GET',
          dataType: 'html',
          success: function(deleteMsg){
            $('tr#' + id).fadeOut('250');
            $('#delete_msg').html('<p>Post successfully deleted</p>');
            $('#delete_msg').slideDown(250).delay(2500).slideUp(250);
          }
        });
      } else {
        window.location.href = deleteUrl;
      }
    }

});

上面的代码由于某种原因不起作用。我哪里错了？

【问题讨论】：

下次：“不起作用”使问题难以理解。没看到确认？看到确认，但帖子没有被删除？等等。说出你所看到的，以及你期望/想要的。（在这种情况下，我认为当您单击除第一个帖子的删除按钮之外的任何按钮时，您可能看不到确认信息。）

标签： javascript ajax confirm

【解决方案1】：

您不能在多个元素上使用相同的 id。相反，给你的删除按钮一个class：

<a href="#" id="delete_post" data-id="<?php echo $post->id ?>" class="delete-post ajax-btn btn btn-success">

...然后使用.delete_post 而不是#delete_post：

$('.delete_post').on('click', function(evt){

【讨论】：