append()导致每次都克隆目标div

Question

第一次发布海报，对任何错误表示歉意。

我是网络开发的新手，目前正在学习javascript。

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

您可以在此处查看整个代码：http://codepen.io/nicholasnbg/pen/VmGeVv

我想把价格存到一张桌子上，结果遇到麻烦了。

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

所以我的桌子看起来像：

-垫子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();
};

Answer 1

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

您在另一个监听器中添加了一个监听器，因此每次单击都会导致第二个监听器的另一个实例化。。所以每次点击"go"时，你都会有1个听众点击"save"。

$(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;
};

Answer 2

您已经嵌套了事件侦听器。您几乎应该总是避免嵌套事件处理程序。将事件处理程序视为在事件发生时执行的代码(在本例中，事件是一次单击)。当用户点击"#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();
});

Answer 3

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

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

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

无论如何，可能还有另一个问题，如果你点击#go按钮几次，然后点击#savePrice，你会得到一些相同的记录。这是正确的吗？

Answer 4

每次单击按钮"Go"，都会初始化$('#savePrice')选择器的新单击处理程序。快速解决方案只是在初始化之前解除对单击事件的绑定
例如：

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