PHP循环中动态表单的AJAX交互与成功消息精确定位

$(function () {
  // 修正后的事件绑定
  $('.class_new_add').on('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // ... AJAX 代码 ...
  });

  $('.class_new_delete').on('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    // ... AJAX 代码 ...
  });
});

$(function () {
  $('.class_new_add').on('submit', function (event) {
    event.preventDefault();
    let currentForm = this; // 捕获当前表单的引用

    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      data: $(currentForm).serialize(), // 使用捕获的表单进行序列化
      success: function (data) {
        // 使用 currentForm 进行DOM遍历和更新
        $(currentForm).closest("div").html("Added to My List");
      }
    });
  });

  $('.class_new_delete').on('submit', function (event) {
    event.preventDefault();
    let currentForm = this; // 捕获当前表单的引用

    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      data: $(currentForm).serialize(),
      success: function (data) {
        $(currentForm).closest("div").html("Removed from My List");
      }
    });
  });
});

$(function () {
  $('.class_new_add').on('submit', function (event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context: this, // 将当前表单元素作为上下文传递
      data: $(this).serialize(),
      success: function (data) {
        // 在 success 回调中，this 指向 context 中传递的元素
        $(this).closest("div").html("Added to My List");
      }
    });
  });

  $('.class_new_delete').on('submit', function (event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      context: this, // 将当前表单元素作为上下文传递
      data: $(this).serialize(),
      success: function (data) {
        $(this).closest("div").html("Removed from My List");
      }
    });
  });
});

<div id="content-new">
<?php   
// 假设 $db_connect 和 $username 已经定义
$sql_action = "SELECT movies.id, movies.img, movies.title, movies.title_full, movies.new, my_list.title AS mylist_title, my_list.username FROM movies LEFT JOIN my_list ON movies.title_full = my_list.title WHERE new != '' ORDER BY movies.id DESC LIMIT 16";
$result_action = mysqli_query( $db_connect, $sql_action )or die( mysqli_error( $db_connect ) );

while ( $row_action = mysqli_fetch_assoc( $result_action ) ) {
  $movie_id = $row_action['id']; // 获取电影ID，可用于生成唯一ID
  $img = $row_action[ 'img' ];
  $title = $row_action[ 'title' ];
  $title_full = $row_action[ 'title_full' ];
  $new = $row_action [ 'new' ];
  $mylist_username = $row_action[ 'username' ]; // 检查是否为当前用户的收藏

  // 假设 $username 是当前登录用户的用户名
  $is_favorite = ($mylist_username == $username); 
?>

<div class="div_fav_item" data-movie-id="<?php echo $movie_id; ?>" style="display: inline-block;">
    <?php if ( $is_favorite ) { // IS A FAVORITE ?>
    <div class="div_new_delete_wrapper" style="display: inline-block;">
        <form class="class_new_delete" data-movie-id="<?php echo $movie_id; ?>" style="display: inline-block;">
            <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
            <input style="display: none" name="favorite_delete_home" value="favorite_delete_home" />
            <input type="submit" name="btn_password" value="Remove" class="class_fav_hover_on">
        </form>
    </div>
    <?php } else { // NOT A FAVORITE ?>
    <div class="div_new_add_wrapper" style="display: inline-block;">
        <form class="class_new_add" data-movie-id="<?php echo $movie_id; ?>" style="display: inline-block;">
            <input style="display: none" type="text" name="title_home" value="<?php echo $title_full; ?>" />
            <input style="display: none" name="favorite_home" value="favorite_home" />
            <input type="submit" name="btn_password" value="Add" class="class_fav_hover_off">
        </form>
    </div>
    <?php } ?>
</div>

<?php } // END LOOP ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
      // 处理添加收藏的AJAX请求
      $('.class_new_add').on('submit', function (event) {
        event.preventDefault();
        var $form = $(this); // 缓存当前表单的jQuery对象
        $.ajax({
          type: 'POST',
          url: 'ajax/mylist.php', // 确保这个URL是正确的
          data: $form.serialize(),
          success: function (data) {
            // 成功后，将表单所在的父div替换为成功消息
            $form.closest(".div_new_add_wrapper").html("Added to My List");
            // 可以在此处更新整个 .div_fav_item 区域，例如：
            // $form.closest(".div_fav_item").find(".add-button-area").html("Added to My List");
          },
          error: function(jqXHR, textStatus, errorThrown) {
            // 处理错误情况
            $form.closest(".div_new_add_wrapper").html("Error adding. Please try again.");
            console.error("AJAX Error:", textStatus, errorThrown);
          }
        });
      });

      // 处理删除收藏的AJAX请求
      $('.class_new_delete').on('submit', function (event) {
        event.preventDefault();
        var $form = $(this); // 缓存当前表单的jQuery对象
        $.ajax({
          type: 'POST',
          url: 'ajax/mylist.php', // 确保这个URL是正确的
          data: $form.serialize(),
          success: function (data) {
            // 成功后，将表单所在的父div替换为成功消息
            $form.closest(".div_new_delete_wrapper").html("Removed from My List");
          },
          error: function(jqXHR, textStatus, errorThrown) {
            // 处理错误情况
            $form.closest(".div_new_delete_wrapper").html("Error removing. Please try again.");
            console.error("AJAX Error:", textStatus, errorThrown);
          }
        });
      });
    });
</script>
</div>