javascript - 使用新计算器克隆 div 以获得新 div

Question

我有一些 Jquery，我用它来克隆一个 div，div 内部是一个进行计算的输入。

当我克隆 div 并创建一个新的 div 时，计算不适用于新的 div。我知道只有按照我写的方式计算才有效。我已搜索过，但找不到我要找的内容。

我还有一个问题，当我在输入中添加数字时，计算适用于第一个 div，但它也会删除我的按钮。

如何为每个新克隆的 div 进行新的计算？如何停止删除添加/删除按钮的计算？

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .attr("id", "clonedInput" + cloneIndex)
    .find("*")
    .each(function() {
      var id = this.id || "";
      var match = id.match(regex) || [];
      if (match.length == 3) {
        this.id = match[1] + (cloneIndex);
      }
    })
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
  cloneIndex++;
}

function remove() {
  $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

// calculator
$(document).ready(function() {
  $(".calculate").bind("keyup change", function(e) {
    var cabwidth = parseFloat($("#cabwidth").val()) || 0;
    var ply = 1.4375;
    var value = cabwidth - ply;

    if (!isNaN(value) && value !== Infinity) {
      $("#sum").text(value);
    }
  });
});

body {
  padding: 10px;
}

.clonedInput {
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clonedInput1" class="clonedInput">
  <input type="text" class="calculate" id="cabwidth" placeholder="Cabinet Width">
  <div id="sum" />
  <div class="actions">
    <button class="clone">Add</button>
    <button class="remove">Remove</button>
  </div>
</div>

这是一个 jsfiddle 示例:jsfiddle

Answer 1

您的按钮被删除，因为它们的父按钮 <div>其内容被覆盖(由于您的语法无效)。您正在尝试自行关闭您的sum <div>与 <div id="sum" /> .

<div> 元素不能自闭合，因为它不是 void element ;您必须使用 <div id="sum"></div> 明确声明该元素为空。进行此更改可以解决按钮消失的问题。

请注意，您可以使用 W3C validation service 验证您的 HTML 标记。 ，以确保您的 HTML 有效(从而以预期的方式运行)。另请注意 .bind() 自 jQuery 3.0 起已弃用；你应该使用 .on() 相反。

至于您的克隆不起作用，那是由于两个原因:

• 第一个是您根据 ID 进行克隆，从而复制了 ID。 ID 在整个 DOM 中必须唯一。使用类而不是 ID，并使用 $(this)引用特定的克隆元素。
  1. 更改#sum至.sum ，而不是 $("#sum").text(value) ， 使用 $(this).parent().find(".sum").text(value)只影响正确的元素。
  2. 更改var cabwidth =
parseFloat($("#cabwidth").val()) || 0至var cabwidth =
parseFloat($(this).val()) || 0 .
  3. 删除所有 ID 的使用，以确保克隆后标记有效。
• 第二个是事件处理程序不会附加到克隆元素。您需要将范围提升到 DOM 加载时可用的元素，并使用 event delegation 。而不是$(".calculate").bind("keyup change", function(e) ，使用$("body").on("keyup change", ".calculate", function(e) .

这在以下示例中已全部修复:

function clone() {
  $(this).parents(".clonedInput").clone()
    .appendTo("body")
    .find("*")
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
}

function remove() {
  $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);

// calculator
$(document).ready(function() {
  $("body").on("keyup change", ".calculate", function(e) {
    var cabwidth = parseFloat($(this).val()) || 0;
    var ply = 1.4375;
    var value = cabwidth - ply;

    if (!isNaN(value) && value !== Infinity) {
      $(this).parent().find(".sum").text(value);
    }
  });
});

body {
  padding: 10px;
}

.clonedInput {
  padding: 10px;
  border-radius: 5px;
  background-color: #def;
  margin-bottom: 10px;
}

.clonedInput div {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clonedInput">
  <input type="text" class="calculate" placeholder="Cabinet Width">
  <div class="sum"></div>
  <div class="actions">
    <button class="clone">Add</button>
    <button class="remove">Remove</button>
  </div>
</div>

希望这有帮助! :)