如何在循环中处理动态生成元素的唯一标识与AJAX回调

2. 解决方案一：确保唯一标识符（最佳实践）

虽然后续的AJAX context方法可以解决目标定位问题，但从前端规范角度出发，为动态生成的元素赋予唯一的ID仍然是最佳实践。

实现方式： 可以利用数据库记录的唯一ID或循环计数器来生成唯一的HTML ID。

在这个改进的PHP代码中：

• 我们为外部的div_fav_hover元素添加了基于$movie_id的唯一ID，如id="div_fav_hover_".
• 为状态显示区域（div_new_delete或div_new_add）也添加了唯一ID，如id="item_status_".
• 表单本身不再使用重复的id="form-new"，而是仅使用类名class_new_delete或class_new_add进行事件绑定。
• 添加了data-movie-id属性到表单，这是一种将数据与DOM元素关联的良好实践。

3. 解决方案二：正确的事件绑定与AJAX上下文管理

即使不为每个消息容器生成唯一ID，我们也可以通过正确的事件绑定和AJAX上下文管理来确保成功消息显示在正确的位置。

3.1 修正事件绑定方式

原始代码中的submit('click', function (event) { ... });是一种不推荐的jQuery事件绑定方式，并且可能导致意外行为。正确的jQuery事件绑定方式是使用.on()方法，尤其是对于表单提交事件。

错误示例：

$('.class_new_add').submit('click', function (event) { ... });

正确示例：

$('.class_new_add').on('submit', function (event) { ... });

.on('submit', ...)明确地监听表单的提交事件。

3.2 利用 this 关键字和 closest() 方法

在事件处理函数内部，this关键字始终指向触发事件的DOM元素。利用这一点，我们可以通过DOM遍历方法（如closest()）找到离当前表单最近的父级元素，从而实现精确的更新。

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

$(function () {
  $('.class_new_add').on('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    let currentForm = $(this); // 缓存当前表单的jQuery对象
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php',
      data: currentForm.serialize(),
      success: function (data) {
        // 在这里，thisform.closest("div") 可以准确地找到触发事件的表单的父级div
        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");
      }
    });
  });
});

在这个改进中，let currentForm = $(this); 捕获了触发提交事件的特定表单元素。在success回调中，currentForm.closest("div")会从该特定表单向上查找最近的div父元素，这个父元素就是包裹该表单的

$(function() {
  $('.class_new_add').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php', // 替换为你的实际后端URL
      context: this, // 将触发事件的DOM元素作为上下文传递
      data: $(this).serialize(),
      success: function(data) {
        // 在这里，this 指向了 context 中传递的 DOM 元素（即触发提交的表单）
        $(this).closest("div").html("Added to My List");
      }
    });
  });

  $('.class_new_delete').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax/mylist.php', // 替换为你的实际后端URL
      context: this, // 将触发事件的DOM元素作为上下文传递
      data: $(this).serialize(),
      success: function(data) {
        // 同样，this 指向触发提交的表单
        $(this).closest("div").html("Removed from My List");
      }
    });
  });
});