使用jQuery Repeater插件时复选框/单选框的动态字段插入异常问题

问题出在没有正确定位当前repeater项内的目标容器，导致ajax返回的内容被插入到了第一个repeater项的容器中。

修复方案 #

1. 先定位到当前复选框所在的repeater项（jquery.repeater生成的项默认带有data-repeater-item属性，可根据实际DOM结构调整选择器）
2. 在当前项范围内查找目标容器.optionTemplate，确保操作的是当前项内的元素
3. 简化代码逻辑，避免全局函数带来的作用域问题

修改后的代码：

$(document).on('change','.optionsCheckbox',function(e){
  const $checkbox = $(this);
  // 定位当前所在的repeater项
  const $currentRepeaterItem = $checkbox.closest('[data-repeater-item]');
  const option = $checkbox.data("opt");
  const item = $checkbox.is(':checked') ? $checkbox.data("itm") : 0;
  // 在当前项内找到目标容器
  const $optionTemplate = $currentRepeaterItem.find(".optionTemplate");
    
  $.ajax({
    type: "POST",
    url: "getOptionCheckbox.php",
    data: {option, item},
    cache: false,
    dataType: "json",
    success: function(response) {
      $optionTemplate.html(response.htmlArray);    
    }
  });
});

关键说明 #

• 用closest('[data-repeater-item]')精准锁定当前操作的repeater项，彻底避免跨项选择元素的问题
• 替换attr("data-*")为data("*")，jQuery的data()方法更适合处理data属性，兼容性和可靠性更强
• 将ajax逻辑内联到事件处理中，消除全局函数可能带来的变量作用域冲突

内容的提问来源于stack exchange，提问作者vance