jQuery .append() bewirkt, dass das Ziel-div jedes Mal geklont wird

Question

Poster zum ersten Mal, Entschuldigung für etwaige Fehler.

Ich bin ein Neuling für Web-Dev, und lerne Javascript im Moment.

Ich baue mir ein kleines Werkzeug, um mir bei meiner täglichen Arbeit zu helfen, die die Preisangabe für Schaumstoffkissen beinhaltet. Ich baue einen Taschenrechner, der Eingaben für Länge Breite Höhe Menge und Schaumtyp nimmt, dann erzeugt Preise. Dieser Teil funktioniert wie geplant.

Sie können den gesamten Code sehen hier: http://codepen.io/nicholasnbg/pen/VmGeVv

Ich bin in zu Schwierigkeiten laufen bei dem Versuch, die Preise in eine Tabelle zu speichern.

Das erste Kissen, das ich speichere hängt als normal an, aber wenn ich dann einen zweiten Kissenpreis erzeuge, und klicke den Knopf, um es zu speichern/an den Tisch zu hängen, speichert es auch die Details für das erste Kissen sowie das neue 2. Kissen.

so dann meine Tabelle wie folgt aussieht:

-cushion1

-cushion1

-cushion2

-cushion1

-cushion2

-cushion3

Wenn ich will es nur so aussehen:

-cushion1

-cushion2

-cushion3

Hier ist die Funktion, die ich gemacht habe:

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

Sie haben die Event-Listener verschachtelt. Sie sollten das Verschachteln von Event-Handlern fast immer vermeiden. Stellen Sie sich Event-Handler als Code vor, der ausgeführt wird, wenn ein Ereignis auftritt (das Ereignis ist in diesem Fall ein Klick). Wenn ein Benutzer auf #go klickt, sollte etwas getan werden. Wenn ein Nutzer auf "#savePrice" klickt, muss etwas anderes getan werden. Beide sind unabhängig. Wenn Sie überprüfen müssen, ob '#go' angeklickt wurde, bevor '#savePrice' angeklickt wurde, dann tun Sie etwas wie ich unten getan habe (prüfen Sie, ob lastCalculated einen Wert hat), aber es gibt viele Möglichkeiten, dies zu überprüfen.

Ich schlage vor, so etwas wie:

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

Das Problem ist, dass Sie auf jeder #go klicken Sie neue Ereignis-Listener auf #savePrice definieren, deshalb haben Sie doppelte Datensätze

Die einfachste Lösung Sie implementieren können, ist eine Zeile in der Funktion hinzuzufügen:

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

Wie auch immer, es könnte ein anderes Problem sein, wenn Sie #go Taste einige Male klicken und #savePrice nach, werden Sie am Ende mit einige gleiche Aufzeichnungen. Ist das korrekt?

Answer 3

Mit jedem Klick auf den Button "Go" initialisierst du einen neuen Click-Handler für $ ('# savePrice') Selektor. Die schnelle Lösung besteht darin, das Klickereignis vor der Initialisierung zu lösen.
Ex:

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

Answer 4

Das ist, wie Sie Ihre js Datei wie .. zu suchen habe ich vorschlagen, dass Sie Ihren Ansatz ändern und vermeiden globalen Variablen verwenden, wann immer Sie können.

Sie haben einen Listener in einen anderen Listener eingefügt, so dass jeder Klick zu einer anderen Instanziierung des zweiten Listeners führt. Sie hatten also bei jedem Klick auf "go" einen weiteren Listener für "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; 

};