jquery.repeater重复新增表单后select触发文本框不显示问题

• 初始加载的表单中（对应示例图1：），select下拉选择框选中others选项时，关联的otherqualification文本输入框可正常触发显示。
• 点击Add按钮通过jquery.repeater插件新增重复表单项后（对应示例图2：），新增表单项内的select选中others选项时，关联的文本输入框无法正常显示。

出问题的核心是两处逻辑健壮性不足：

1. 事件委托绑定在[data-repeater-list]节点上，这个节点会被jquery.repeater插件在增删表单项时重绘DOM，导致新增元素无法触发绑定的委托事件
2. 用$(this).closest("div")查找父容器的逻辑太模糊，一旦插件在select外层嵌套额外div节点，就无法正确定位到包含目标输入框的容器，toggle逻辑直接失效。初始加载的表单项没有额外嵌套，所以能正常运行。

调整两处逻辑即可解决：

• 将事件委托的父节点替换为不会被插件修改的静态外层.repeater容器，保证事件能正常冒泡捕获
• 将父容器查找逻辑改为明确匹配最近的[data-repeater-item]表单项节点，不受中间DOM层级变动影响

修复后的JS代码如下：

$(document).ready(function() {
  $('.repeater').repeater({
    repeaters: [{
      selector: '.inner-repeater'
    }]
  });
  // 委托绑定到静态的.repeater容器
  $(".repeater").on("change", "[name*=cqualificationtxtt]", function() {
    $(this).closest("[data-repeater-item]") // 明确查找最近的重复表单项容器
      .find("[name*=otherqualification]")
      .toggle(this.value === "others");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

<div class="repeater wd_100">
  <div data-repeater-list="data">
    <div data-repeater-item class="o_h mb_15">
      <div class="wd_12 fl_lf  mb_33">
        <label for="applicant_name" class="control-label lbl_hide"><b>Qualification</b>:</label>
        <select class="form-control" data-role="select-dropdown" name="cqualificationtxtt" >
          <option selected="">Select</option>
          <option value="b.tech">b.tech</option>
          <option value="mca">mca</option>
          <option value="others">Others</option>
        </select>
        <input type="text" name="otherqualification" placeholder="Enter Qualification" style="display:none" />
      </div>
      <div class="wd_12 fl_lf mb_33">
        <label for="applicant_name" class="control-label lbl_hide"><b>college</b>:</label>
        <input type="text" class="form-control" placeholder="" name="collagetxt">
      </div>
    </div>
  </div>
  <input data-repeater-create type="button" class="btn btn-success" value="Add" />
</div>

内容的提问来源于stack exchange，提问作者Sunil kumar Behera