使用新的div的新计算器克隆div [英] Clone div with new calculator for new divs

问题描述

我有一些用于克隆div的Jquery，在div内是进行计算的输入.

I have some Jquery that I am using to clone a div, inside the div is an input that does a calculation.

当我克隆div并创建一个新的div时，该计算不适用于新的div.我了解该计算仅以我编写的方式起作用.我已经搜索过，但是找不到我想要的东西.

When I clone the div and it creates a new div, the calculation does not work for the new divs. I understand that the calculation only works once the way I have it written. I have searched, but cannot find what I am looking for.

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

I also have an issue that when I add a number in the input the calculation works for the first div, but it also removes my buttons.

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

How can I have a new calculation for each new cloned div? How can I stop the calculation from removing my add/remove buttons?

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

Here is a jsfiddle example: jsfiddle

推荐答案

您的按钮由于其父<div>的内容被覆盖(由于无效的语法)而被删除.您正在尝试用<div id="sum" />自动关闭sum <div>.

Your buttons get removed because their parent <div> has its contents overwritten (due to your invalid syntax). You're attempting to self-close your sum <div> with <div id="sum" />.

<div> 元素不能自动关闭，因为它不是 无效元素 ；您必须使用<div id="sum"></div>明确声明该元素为空.进行此更改可解决按钮消失的问题.

The <div> element cannot be self-closed, as it is not a void element; you must explicitly state that the element is empty with <div id="sum"></div>. Making this change fixes the problem with your buttons disappearing.

请注意，您可以使用 W3C验证服务 来验证HTML标记，以确保您的HTML有效(并以预期的方式运行).另请注意，自jQuery 3.0起，不推荐使用 .bind() ；您应该改用 .on() .

Note that you can validate your HTML markup with the W3C validation service, to ensure that your HTML is valid (and thus behaves in a way that is expected). Also note that .bind() is deprecated as of jQuery 3.0; you should be using .on() instead.

对于克隆无法正常工作，这是由于两个原因:

As for your cloning not working, that is due to two reasons:

• 首先是您要基于ID进行克隆，从而复制ID.在整个DOM中，ID必须唯一.使用类而不是ID，并使用$(this)引用特定的克隆元素.

• The first being that you are cloning based on ID, and thus duplicating the ID. IDs must be unique throughout the DOM. Use classes instead of IDs, and use $(this) to refer to the specific cloned element.

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的使用，以确保克隆后的有效标记.

1. Change #sum to .sum, and instead of $("#sum").text(value), use $(this).parent().find(".sum").text(value) to only affect the correct element.
2. Change var cabwidth = parseFloat($("#cabwidth").val()) || 0 to var cabwidth = parseFloat($(this).val()) || 0.
3. Remove all use of IDs to ensure valid markup after the cloning.

第二个原因是事件处理程序未附加到克隆的元素.您需要将范围提升到DOM加载时可用的元素，并使用 事件委托 .代替$(".calculate").bind("keyup change", function(e)，使用$("body").on("keyup change", ".calculate", function(e).

The second being that event handlers do not get attached to cloned elements. You need to hoist the scope to an element that is available on DOM load, and make use of event delegation. Instead of $(".calculate").bind("keyup change", function(e), use $("body").on("keyup change", ".calculate", function(e).

在以下示例中，所有问题均已解决:

This is all fixed in the following example:

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>

希望这会有所帮助！ :)

Hope this helps! :)

这篇关于使用新的div的新计算器克隆div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！