理解问题根源
在php等后端语言的 while 循环中动态生成html内容时，如果其中包含带有固定 id 属性的元素（如 <div id="id_new_add"> 或 <form id="form-new">），这些 id 将在每次循环迭代时重复出现。根据html规范，id 属性在整个文档中必须是唯一的。当javascript（尤其是jquery）使用 $('#some_id') 这样的id选择器时，它只会匹配到文档中第一个具有该id的元素。因此，所有通过ajax提交后的成功或失败消息，都会错误地显示在同一个位置，而不是用户实际操作的那个表单或记录旁边。
此外，原始代码中jQuery事件绑定使用了 submit('click', function(){...}) 这种不正确的语法。jQuery中绑定表单提交事件的正确方式是使用 .on('submit', function(){...})。
优化HTML结构与ID管理
为了解决ID重复和定位不准确的问题，我们应避免在循环中生成重复的 id。推荐的做法是完全依赖类选择器 (class) 和jQuery的DOM遍历方法，这样可以使HTML结构更简洁，JavaScript代码更具通用性和可维护性。
我们将移除 form 元素上的固定 id="form-new"，并为每个表单的父级反馈容器添加一个通用类，例如 feedback-container。
<?php
// 假设 $db_connect 和 $username 已经定义并初始化
// 这里简化了数据库查询和数据获取，但结构与原问题类似
// $sql_action 查询应包含 movies.id 以便在需要时作为唯一标识
$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));
?>
<div id="content-new">
<?php
while ($row_action = mysqli_fetch_assoc($result_action)) {
$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_hover" style="display: inline-block;">
<?php if ($is_favorite) { // 已经收藏 ?>
<div class="div_new_delete feedback-container" style="display: inline-block;">
<form class="class_new_delete">
<input type="hidden" name="title_home" value="<?php echo htmlspecialchars($title_full); ?>" />
<input type="hidden" name="favorite_delete_home" value="favorite_delete_home" />
<input type="submit" value="从列表中移除" class="class_fav_hover_on">
</form>
</div>
<?php } else { // 未收藏 ?>
<div class="div_new_add feedback-container" style="display: inline-block;">
<form class="class_new_add">
<input type="hidden" name="title_home" value="<?php echo htmlspecialchars($title_full); ?>" />
<input type="hidden" name="favorite_home" value="favorite_home" />
<input type="submit" value="添加到我的列表" class="class_fav_hover_off">
</form>
</div>
<?php } ?>
</div>
<?php } // END LOOP ?>
</div>在上述代码中，我们移除了 form 上的 id 属性，并为显示反馈消息的 div 添加了 feedback-container 类。这样，每个表单都有一个唯一的父级容器，我们可以通过类选择器和DOM遍历来定位它。
立即学习“PHP免费学习笔记（深入）”；
修正JavaScript事件绑定与上下文管理
JavaScript部分需要进行两项关键修正：事件绑定语法和 this 作用域的处理。
正确的事件绑定： 将 submit('click', ...) 更改为 .on('submit', ...)。这是jQuery推荐的事件绑定方式，支持事件委托和更灵活的事件处理。
-
管理 this 上下文： 在AJAX回调函数（success、error 等）中，this 的指向会发生变化，通常不再指向触发事件的DOM元素。为了在回调中仍然能够引用到触发AJAX请求的表单元素，我们可以采用以下两种方法：
-
方法一：保存 this 引用 在AJAX调用外部将 this 赋值给一个局部变量，然后在回调函数中使用这个变量。
$(function () { // 处理“添加到我的列表”操作 $('.class_new_add').on('submit', function (event) { event.preventDefault(); // 阻止表单默认提交行为 let currentForm = this; // 保存当前表单的引用 $.ajax({ type: 'POST', url: 'ajax/mylist.php', // 实际的AJAX处理文件 data: $(currentForm).serialize(), // 使用保存的引用序列化表单数据 success: function (data) { // 成功后，将当前表单最近的`.feedback-container`内容替换为成功消息 $(currentForm).closest(".feedback-container").html("已添加到我的列表"); }, error: function(jqXHR, textStatus, errorThrown) { $(currentForm).closest(".feedback-container").html("添加失败，请重试。"); console.error("AJAX Error: " + textStatus, errorThrown); } }); }); // 处理“从列表中移除”操作 $('.class_new_delete').on('submit', function (event) { event.preventDefault(); // 阻止表单默认提交行为 let currentForm = this; // 保存当前表单的引用 $.ajax({ type: 'POST', url:
-
