如何使用 JQuery 附加动态内容而不重复？

Question

你好我有这样的源代码，问题是当我点击类“addInput”的按钮时，它在两个地方都触发了函数，并且每章的数量都出错了

我怎样才能使新赛季附加之外和新赛季附加内部的“添加章节”按钮分开工作并且章节数正确？？

关于 JSFiddle 的问题：https://jsfiddle.net/t80a7gps/

源代码：

<div class="adp-box">
  <div class="inputWrapper"></div>
  <button class="btn btn-success addInput">
    Add New Chapter
  </button>
  <hr />
  <div class="seasonsWrapper"></div>
  <button class="btn btn-primary addSeasons">
   Add New Season
  </button>
</div>

和脚本

  $(document).ready(function () {
    let randId = 1;
    $(document).on("click", "button.addInput", function (e) {
      e.preventDefault();
      build_inputs($(this), input_str);
    });
    $(".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(e, configs = false) {
      if (!configs) {
        configs = {
          title: "Chapter",
          forms: [
            {
              type: "text",
              name: "name",
              class: "form-control mb-2",
              placeholder: "Enter Data..."
            }
          ]
        };
      }
      let ind =
        $(".adp-slides").length > 0 ? $(".adp-slides").length + 1 : 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>`;
      $(".inputWrapper").append(str);

      $(".removeSlide").click(function () {
        $("#" + $(this).attr("data-target")).remove();
      });

      randId++;
    }

    function build_seasons(e, configs = false) {
      let ind =
        $(".new-seasons-box").length > 0
          ? $(".new-seasons-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>`;
      str += `</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);

      $(".removeSlide").click(function () {
        $("#" + $(this).attr("data-target")).remove();
      });
    }
  });

Answer 1

您传入了$(this)，但没有（出现）使用它（变量名e 很难分辨）。

build_inputs($(this), input_str);

相反，传入父“盒子”/包装器，然后当您追加时，您可以只追加到那个盒子。

wrapper.append(str);

同样计算那个赛季的章节数：

let ind =
       wrapper.find(".adp-slides").length > 0 ? wrapper.find(".adp-slides").length + 1 : 1;

这将使您的$(".removeSlide").click 存在许多问题，特别是每张新幻灯片都会向所有删除按钮添加一个新的点击处理程序，这是您不想要的；其次，它会删除所有具有相同目标的人。章节相同时重复使用 ID 造成的。

使用 DOM 导航找到要删除的相关章节：

 wrapper.find(".removeSlide").click(function() {
   $(this).closest(".adp-slides").remove();
 });

更新小提琴：https://jsfiddle.net/t80a7gps/1/

---

请注意，您的代码在删除时会重复使用数字，因为您计算的是章节数，而不是存储已添加的章节数。修复取决于您想对“间隙”做什么 - 留下间隙并添加下一个数字，例如 1,2,3 / 删除 2 留下 1,3 / next = 4 或重新编号间隙 - 1,2,3 / 删除 2 留下 1,2。