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有效（因此行为符合预期）。另请注意，自jQuery 3.0起， .bind() 已弃用;您应该使用 .on() 。

至于你的克隆无法正常工作，原因有两个：

第一个是您基于ID进行克隆，从而复制ID。整个DOM中的ID必须唯一。使用类而不是ID，并使用$(this)来引用特定的克隆元素。
1. 将#sum更改为.sum，而不是$("#sum").text(value)，请使用 $(this).parent().find(".sum").text(value)仅影响。{1}} 正确的元素。
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>

希望这有帮助！：）

Answer 2

Here is an updated jsFiddle.

关于我改变的一些注意事项：

.bind()已弃用
将更改/密钥附加到文档，然后将.calculate作为选择器传递，这将与动态元素一起使用，而在它不是
确保每个克隆和子元素都具有唯一ID
将计算函数更新为目标元素相对于当前输入

使用新计算器克隆div为新div

2 个答案: