如何在不重复的情况下附加 JQuery 的动态内容？

Question

你好，我有这样的源代码，问题是当我用class“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();
 });

已更新 fiddle：https://jsfiddle.net/t80a7gps/1/

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

如何在不重复的情况下附加 JQuery 的动态内容？

How to append dynamic content with JQuery without duplicated?

javascript

jquery

append

dynamic-content