jQuery .append（）を実行すると、ターゲットdivがクローンされるたびに

Question

初めてのポスター、間違いがありましたらお詫び申し上げます。

私はWeb開発者の初心者ですし、現時点ではJavaScriptを学んでいます。

私は、泡クッションの価格を引用して仕事をするのに役立つ小さなツールを構築しています。私は長さの幅の高さの数量とフォームの種類を入力して価格を生成する電卓を作っています。その部分は計画どおりに働いています。私はテーブルに価格を保存しようとする際にトラブルに実行しているよhttp://codepen.io/nicholasnbg/pen/VmGeVv

：

現在地コード全体を見ることができます。

最初に保存したクッションは普通に追加されますが、次に2番目のクッション価格を生成してボタンをクリックしてテーブルに保存/追加すると、最初のクッションの詳細も保存されます新しい第2クッション。

ので、私のテーブルには、その後、次のようになります。

-cushion1

-cushion1

-cushion2

-cushion1

-cushion2

-cushion3

私はちょうどそれが見えるようにしたい：ここ

-cushion1

-cushion2

-cushion3

は私が作った機能です：

$('#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

イベントリスナーをネストしました。ほとんどの場合、イベントハンドラのネストは避けてください。イベントハンドラは、イベントが発生したときに実行されるコードと考えることができます（このイベントはクリックです）。ユーザーが '#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 2

問題は、各#goのクリックで#savePriceに新しいイベントリスナーが定義されていることです重複レコード。あなたは、で終わるだろう、あなたは#goボタン数回以降#savePriceをクリックすると、別の問題がある可能性があります

とにかく

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

、：あなたが実装することができ

最も簡単な修正はあなたの関数に1行を追加することです同じレコードはほとんどありません。あれは正しいですか？

Answer 3

ボタンをクリックするたびに、$（ '＃savePrice'）セレクタの新しいクリックハンドラが初期化されます。簡単な解決策は、初期化の前にクリックイベントをバインド解除することです。
例：

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

Answer 4

あなたのjsファイルは次のように見ている方法です。.. は、私はあなたのアプローチを変更したときにあなたができるグローバルVARSの使用を避けることをお勧めします。

リスナーを別のリスナーに追加すると、クリックするたびに2番目のリスナーのインスタンスが生成されます。「go」をクリックするたびに「save」で1つのリスナーが追加されました。

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

};