如何修复切换Select选项后点击Add Option重复添加输入框的问题

问题现象 #

先选择dynamic选项，再切换回static选项后点击Add Option按钮，会重复添加输入框；但直接选择static选项不切换则无此问题。

问题根源 #

每次切换到static选项时，你都会通过$(document).on('click', ...)给Add Option按钮绑定一次点击事件。切换多次后，同一个按钮会被绑定多个相同的点击事件，点击时所有事件都会触发，导致输入框重复添加。

修复方案 #

在绑定新的点击事件前，先解绑该按钮之前绑定的所有同类型事件，避免事件叠加。对Add Option和Remove Option按钮都要做这个处理。

修改后的代码 #

JavaScript部分

$(document).on('change', '#select-input-view', function(e) {
  e.preventDefault()
  let select = $(this).find(':selected').attr('data-input')
  arr_select = select.split("-")
  if (arr_select[1] == 'static') {
    document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = ``
    document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
                    <div id="static-option-${arr_select[2]}" class="mb-3">
                    <button id="add-option-select-view-${arr_select[2]}" class="btn btn-primary">add option</button>
                    <button id="remove-option-select-view-${arr_select[2]}" class="btn btn-danger">remove option</button>
                        <div id="view-option-${arr_select[2]}" class="mt-3">

                        </div>
                    </div>
                    `
    var num_option_insert = $('.data-div-option').length;
    // 先解绑再绑定Add Option事件，避免重复绑定
    $(document).off('click', '#add-option-select-view-' + arr_select[2]).on('click', '#add-option-select-view-' + arr_select[2], function(e) {
      e.preventDefault()
      thisid = this.id
      arr_id = thisid.split("-")
      num_option_insert += 1
      option = `
                        <div id="option-div-view-${num_option_insert}-${arr_id[4]}" data-div-option="${num_option_insert}" class="col-md-3">
                        <label class="form-label">select option ${num_option_insert}</label>
                        <input name="123" type="text" class="form-control" required>
                        </div>
                        `
      view_option = document.getElementById('view-option-' + arr_id[4])
      $(view_option).append(option)
    })

    // 删除字段 - 同样先解绑再绑定Remove Option事件
    $(document).off('click', '#remove-option-select-view-' + arr_select[2]).on('click', '#remove-option-select-view-' + arr_select[2], function(e) {
      e.preventDefault()
      thisid = this.id
      arr_id = thisid.split("-")
      console.log(arr_id)
      var row = $('#option-div-view-' + num_option_insert + '-' + arr_id[4]);
      row.remove();
      num_option_insert -= 1
    })
  } else {
    document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = ``
    document.getElementById('select-id-input-view-' + arr_select[2]).innerHTML = `
                    <div id="dynamic-option-1" class="mb-3">
                    <div class="mb-3">
                    <label class="form-label">Select Data Dynamic</label>
                    <select name="select-dynamic" class="form-select" required>
                    <option selected disabled>Select data dynamic</option>
                    <?php foreach ($table_database as $data) {
                        $table = $data->Tables_in_db_builder;
                        $arr = explode("_", $table);
                        if ($arr[0] != 'sys') {
                    ?>
                                        <option><?= $data->Tables_in_db_builder ?></option>
                                        <?php }
                                } ?>
                            </select>
                            </div>
                            </div>`
  }
})

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-input-view" name="input-type" class="form-select">
  <option>text</option>
  <option>number</option>
  <option>textarea</option>
  <option data-input="select-static-1">select static</option>
  <option data-input="select-dynamic-1">select dynamic</option>
  <option>float</option>
  <option>date</option>
</select>

<div id="select-id-input-view-1">

</div>

额外优化建议 #

• 可以把num_option_insert的统计逻辑改为基于当前view-option容器内的子元素数量，比如var num_option_insert = $('#view-option-' + arr_select[2]).children().length;，这样统计更准确，不会受其他页面元素影响。
• 动态生成元素时，确保ID唯一性，避免后续扩展时出现冲突。

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