如何使用jQuery追加动态内容避免重复触发、章节序号错误

问题根因 #

你的代码存在三个核心问题导致功能异常：

• 章节插入位置错误：所有addInput按钮点击后，新章节都统一插入到全局的.inputWrapper容器中，没有区分点击的是全局添加按钮还是季分组内的添加按钮
• 章节序号计算逻辑错误：序号统计的是页面所有.adp-slides元素的总数，没有按分组独立统计，所以不同分组的章节序号会互相影响
• 季序号统计的选择器写错：你给季分组加的类是new-season-box，但统计数量时用的是.new-seasons-box（多了s），导致新增季的序号一直错误显示为2

修改方案 #

1. 调整build_inputs函数的插入逻辑：通过触发点击的按钮，找到它同级对应的.inputWrapper作为插入容器，实现分组独立插入
2. 修改章节序号统计逻辑：只统计当前插入容器下的.adp-slides数量，生成分组独立的序号
3. 修正季序号统计的选择器错误
4. 优化删除按钮的事件绑定：改为全局事件委托，避免每次新增元素时重复绑定事件导致多次触发

修改后完整JS代码 #

$(document).ready(function () {
    let randId = 1;
    // 全局委托添加章节点击事件
    $(document).on("click", "button.addInput", function (e) {
      e.preventDefault();
      build_inputs($(this), input_str);
    });
    // 全局委托删除事件，不用每次新增都绑定
    $(document).on("click", ".removeSlide", function () {
      $("#" + $(this).attr("data-target")).remove();
    });
    // 添加季事件
    $(".addSeasons").on("click", function (e) {
      e.preventDefault();
      build_seasons($(this));
    });

    let input_str = {
      title: "chap",
      forms: [
        {
          type: "text",
          name: "name",
          class: "form-control mb-2",
          placeholder: "Description",
          disabled: false
        },
        {
          type: "text",
          name: "link",
          class: "form-control mb-2",
          placeholder: "Link trailer",
          disabled: false
        },
        {
          type: "text",
          name: "link_sub",
          class: "form-control mb-2",
          placeholder: "Subtitles",
          disabled: false
        }
      ]
    };

    function build_inputs(triggerBtn, configs = false) {
      if (!configs) {
        configs = {
          title: "Chapter",
          forms: [
            {
              type: "text",
              name: "name",
              class: "form-control mb-2",
              placeholder: "Enter Data..."
            }
          ]
        };
      }
      // 获取当前按钮对应的分组容器
      const $targetWrapper = triggerBtn.siblings(".inputWrapper");
      // 仅统计当前分组下的章节数，生成本分组独立序号
      let ind = $targetWrapper.children(".adp-slides").length + 1;
      let str = `<div id="${
        configs.title + "-" + ind
      }" class="row adp-slides">
      <div class="col-md-10">
      <div class="form-group">
      <label><b>${"Chapter"} ${ind}</b></label>`;

      for (let config of configs.forms) {
        if (config.type === "file") {
          if (config.name === "movie") {
            str += `<input type="${config.type}" name="${
              config.name
            }" id="adpElemMoive${randId}" class="adpInputs ${
              config.class
            }" data-rel="${configs.title + "-" + ind}" placeholder="${
              config.placeholder
            }" onchange = "prepareUpload(this);">`;
            console.log(`adpElemMoive${randId}`);
          } else {
            str += `<input type="${config.type}" name="${
              config.name
            }" id="adpElemMoiveSubs${randId}" class="adpInputs ${
              config.class
            }" data-rel="${configs.title + "-" + ind}" placeholder="${
              config.placeholder
            }" onchange = "prepareUpload(this);">`;
          }
        } else {
          str += `<input type="${config.type}" name="${
            config.name
          }" id="adpElem${randId}" class="adpInputs ${
            config.class
          }" data-rel="${configs.title + "-" + ind}" placeholder="${
            config.placeholder
          }" ${config.disabled ? "disabled" : ""} >`;
        }
      }

      str += `</div>
      </div>
      <div class="col-md-2">
      <span class="badge badge-danger removeSlide" data-target="${
        configs.title + "-" + ind
      }"><i class="fas fa-trash-alt">Delete Chapter ${ind}</i>
      </span><br /><br />
      </div>
              </div>`;
      // 插入到当前分组的容器中
      $targetWrapper.append(str);
      randId++;
    }

    function build_seasons(e, configs = false) {
      // 修正选择器错误，去掉多余的s
      let ind =
        $(".new-season-box").length > 0
          ? $(".new-season-box").length + 2
          : 2;
      let str = `<div id="${"season"}-${ind}" class="row new-season-box">
      <div class="col-md-10"><div class="form-group"><label><b>${"Season"} ${ind}</b></label></div>
      <div class="inputWrapper"></div>
      <button type="button" class="addInput">Add Chapter for this Season</button>
      </div>
              <div class="col-md-2">
      <span class="badge badge-danger removeSlide" data-target="${"season"}-${ind}"><i class="fas fa-trash-alt">Delete Season ${ind}</i>
      </span><br /><br />
      </div>
              </div>`;
      $(".seasonsWrapper").append(str);
    }
  });

内容的提问来源于stack exchange，提问作者Joker Dark Knight