Javascript 导致每次克隆目标div的jQuery.append（）

第一次张贴海报，为任何错误道歉

我是web开发的新手，目前正在学习javascript

我正在建立一个小工具来帮助我的日常工作，包括泡沫垫的报价。我正在构建一个计算器，它输入长度、宽度、高度、数量和泡沫类型，然后生成价格。那部分工作按计划进行

您可以在此处看到整个代码：

我试图把价格存到一张桌子上，遇到了麻烦

我保存的第一个缓冲区会正常追加，但当我生成第二个缓冲区价格并单击按钮将其保存/追加到表中时，它还会再次保存第一个缓冲区以及新的第二个缓冲区的详细信息

所以我的桌子看起来像：

-垫子1

-垫子1

-垫子2

-垫子1

-垫子2

-垫子3

当我只想让它看起来像：

-垫子1

-垫子2

-垫子3

以下是我创建的函数：

$('#savePrice').click(function() {
      console.log("price saved");
      if (lastCalculated) {
        var code = "<div class='row'> <div class='col-md-2 qtyL'>" + qty + " </div>  <div class='col-md-4 dimL'>" + width * 1000 + " x " + length * 1000 + " x " + height * 1000 + "</div>  <div class='col-md-2 eachPrice'>" + "$" + cushionPrice + "</div>  <div class='col-md-2 totalLinePrice'>" + "$" + (cushionPrice * qty).toFixed(2) + "</div> </div>    ";

        $(".priceList").append(code);

        clearInputs();
      };

---

问题是，每次单击都会在savePrice上定义新的事件侦听器，这就是为什么会有重复记录的原因

可以实现的最简单修复方法是在函数中添加一行：

$('#savePrice').unbind('click').click(function() {
   ...
});

---

无论如何，可能还有另一个问题，如果你点击go按钮几次，然后保存价格，你最终会得到几条相同的记录。是否正确？

每次单击“Go”按钮，您都会初始化$'savePrice'选择器的新单击处理程序。快速解决方案就是在初始化之前解除click事件的绑定。 例：

---

这就是js文件的外观。。 我建议您改变方法，尽可能避免使用全局变量

您将一个侦听器添加到另一个侦听器中，因此每次单击都会导致第二个侦听器的另一个实例化。。因此，每次单击go时，您都有一个用于单击保存的侦听器

$(document).ready(function() {
var med = {
    name: "23-130",
    price: 625
};
var cushionPrice = 0;
var medFirm = {
    name: '29-200',
    price: 878
};
var foams = [med, medFirm];

$("#go").click(function() {
    var width = document.getElementById("width").value / 1000;
    var length = document.getElementById("length").value / 1000;
    var height = document.getElementById("height").value / 1000;
    var qty = document.getElementById("qty").value;
    var disc = document.getElementById("disc").value;
    var dRate = 1 - (disc / 100);
    var cubic = width * length * height;
    console.log(cubic);
    // $('#cubic').html('cubic: ' + cubic);
    var e = document.getElementById("foamDD");
    var foamType = e.options[e.selectedIndex].value;
    console.log(foamType);
    var price;
    for (x = 0; x < foams.length; x++) {
        if (foamType === foams[x].name) {
            price = foams[x].price;
        }

    }
    cushionPrice = (price * cubic * dRate).toFixed(2);
    $('#price').html('$' + cushionPrice + ' each');
    $('#total').html('Total Price = $' + (cushionPrice * qty).toFixed(2));



});

$('#savePrice').click(function() {
        console.log("price saved");
        var code = "<div class='row'> <div class='col-md-2 qtyL'>" + qty + " </div>    <div class='col-md-4 dimL'>" + width * 1000 + " x " + length * 1000 + " x " + height * 1000 + "</div>    <div class='col-md-2 eachPrice'>" + "$" + cushionPrice + "</div>    <div class='col-md-2 totalLinePrice'>" + "$" + (cushionPrice * qty).toFixed(2) + "</div> </div>        ";

        $(".priceList").append(code);

        clearInputs();
    });
});

function clearInputs() {
    console.log('inputs cleared');

    document.getElementById("width").value = '';
    document.getElementById("length").value = '';
    document.getElementById("height").value = '';
    document.getElementById("qty").value = '';
    document.getElementById("disc").value = '';
    width = 0;
    length = 0;
    height = 0;
    qty = 0;
    disc = 0;
    dRate = 0;
    price = 0
    cushionPrice = 0;

};

---

您已经嵌套了事件侦听器。您几乎应该始终避免嵌套事件处理程序。将事件处理程序视为在事件发生时执行的代码。在本例中，事件是单击。当用户单击“go”时，应该执行一些操作。当用户单击“savePrice”时，需要执行其他操作。两者都是独立的。如果您需要检查在单击“savePrice”之前是否单击了“go”，请执行类似于我在下面所做的操作，检查lastCalculated是否有一个值，尽管您可以通过多种方式进行检查

我建议如下：

var lastCalculated; // keep record of the last calculation

$("#go").click(function() {
    var width = document.getElementById("width").value / 1000;
    var length = document.getElementById("length").value / 1000;
    var height = document.getElementById("height").value / 1000;
    var qty = document.getElementById("qty").value;
    var disc = document.getElementById("disc").value;
    var dRate = 1 - (disc / 100);
    var cubic = width * length * height;
    console.log(cubic);
    // $('#cubic').html('cubic: ' + cubic);
    var e = document.getElementById("foamDD");
    var foamType = e.options[e.selectedIndex].value;
    console.log(foamType);
    var price;
    for (x = 0; x < foams.length; x++) {
      if (foamType === foams[x].name) {
        price = foams[x].price;
      }

    }
    var cushionPrice = (price * cubic * dRate).toFixed(2);

    lastCalculated = { // keep this calculation in memory
      qty: qty,
      width: width,
      length: length,
      height: height,
      cushionPrice: cushionPrice
    };

    $('#price').html('$' + cushionPrice + ' each');
    $('#total').html('Total Price = $' + (cushionPrice * qty).toFixed(2));
  });

$('#savePrice').click(function() { // notice this event handler is no longer nested inside the #go click handler
      if(lastCalculated) {
        var code = "<div class='row'> <div class='col-md-2 qtyL'>" + lastCalculated.qty + " </div>  <div class='col-md-4 dimL'>" + lastCalculated.width * 1000 + " x " + lastCalculated.length * 1000 + " x " + lastCalculated.height * 1000 + "</div>  <div class='col-md-2 eachPrice'>" + "$" + lastCalculated.cushionPrice + "</div>  <div class='col-md-2 totalLinePrice'>" + "$" + (lastCalculated.cushionPrice * lastCalculated.qty).toFixed(2) + "</div> </div>    ";

        $(".priceList").append(code);

        lastCalculated = null; // remove the calculation from memory, it is no longer needed
      }

      clearInputs();
    });

---

您发布的函数缺少一个部分…追加部分在哪里？正如@MateuszWoźniak已经指出的，您发布的代码缺少其余的click回调函数。嗨，Luca，谢谢您的帮助。现在唯一的问题是html代码“var code”，它现在在$go.click处理程序之外，正在使用$go.clickfunction{}中包含的一组变量；如果我应该避免使用全局变量，那么访问这些变量的最佳方法是什么？您应该构建一个类。无论如何如果你正在学习，可以使用global。。一步一步：…如果你需要他们的全球性，设置他们的全球性这工作非常完美，我知道问题是从现在开始的，谢谢！

var lastCalculated; // keep record of the last calculation

$("#go").click(function() {
    var width = document.getElementById("width").value / 1000;
    var length = document.getElementById("length").value / 1000;
    var height = document.getElementById("height").value / 1000;
    var qty = document.getElementById("qty").value;
    var disc = document.getElementById("disc").value;
    var dRate = 1 - (disc / 100);
    var cubic = width * length * height;
    console.log(cubic);
    // $('#cubic').html('cubic: ' + cubic);
    var e = document.getElementById("foamDD");
    var foamType = e.options[e.selectedIndex].value;
    console.log(foamType);
    var price;
    for (x = 0; x < foams.length; x++) {
      if (foamType === foams[x].name) {
        price = foams[x].price;
      }

    }
    var cushionPrice = (price * cubic * dRate).toFixed(2);

    lastCalculated = { // keep this calculation in memory
      qty: qty,
      width: width,
      length: length,
      height: height,
      cushionPrice: cushionPrice
    };

    $('#price').html('$' + cushionPrice + ' each');
    $('#total').html('Total Price = $' + (cushionPrice * qty).toFixed(2));
  });

$('#savePrice').click(function() { // notice this event handler is no longer nested inside the #go click handler
      if(lastCalculated) {
        var code = "<div class='row'> <div class='col-md-2 qtyL'>" + lastCalculated.qty + " </div>  <div class='col-md-4 dimL'>" + lastCalculated.width * 1000 + " x " + lastCalculated.length * 1000 + " x " + lastCalculated.height * 1000 + "</div>  <div class='col-md-2 eachPrice'>" + "$" + lastCalculated.cushionPrice + "</div>  <div class='col-md-2 totalLinePrice'>" + "$" + (lastCalculated.cushionPrice * lastCalculated.qty).toFixed(2) + "</div> </div>    ";

        $(".priceList").append(code);

        lastCalculated = null; // remove the calculation from memory, it is no longer needed
      }

      clearInputs();
    });