jQuery Änderung funktioniert nicht für 2 Teile, die dynamisch hinzugefügt werden

Question

Ich habe eine Reihe von js-Code, der leichter gemacht werden kann, aber nicht sicher, wie.

Das Problem ist, dass ich mit zwei Rechenmaschinen-Werte zu berechnen ...

One aktiv ist, während Drag n Drop verwendbar ist und dann ist es untauglich für den mobilen Auflösungen ... und die zweite ist aktiv nur auf mobilen Auflösungen.

Auf jeden Fall habe ich dies:

items = ['item 22', 'item 23'] 
output = [] 
for (var i = 0; i < items.length; i++) { 
    output.push('<p>' + items[i] + '<input class="total-items" value="0" />' + '</p>'); 
} 
$('#total-elements').html(output.join("")); 
$(".total-items").change(function(e) { 
    calculateTotal(); 
}); 

und (Differenz ist in Eingabeteil unterhalb dieses hat onClick())

c = ['item 1','item 2', 'item 3'] 
o = [] 
for (var i = 0; i < c.length; i++) { 
    o.push('<p>' + c[i] + '<input class="total" value="0" />' + '<a href="#" class="remove-link" onClick="deleteRecord(' + i + ');" class="delete-item">x</a></p>'); 
} 
$('#total').html(o.join("")); 
$(".total").change(function(e) { 
    calculate(); 
}); 

-Code innerhalb Dokument fertig gestellt ist ... Das Problem ist mit diesem onClick Teil, wenn das() -Funktion innerhalb Dokument bereit ist, dann funktioniert es nicht (ich bekomme ReferenceError: 'Funktionsname' nicht definiert ... Wenn ich es außerhalb Dokument bereit und dann muss ich verschieben etwas andere Teile, um es zum Laufen zu bringen, aber jetzt, wenn ich klicke, um ein Element aus der Liste zu entfernen, wird es entfernt, das ist in Ordnung, aber wenn ich versuche, Werte zu verwenden, Rechner berechnet sie nicht seit .change() nicht Trigger auf allen ...

Wenn es wie diese außerhalb des Dokuments

$(document).change(".total", function(e) { 
    calculate(); 
}); 

dann calculateTotal() bereit, hinzufügen, die nicht funktionieren bereit innen Dokument platziert ...

So bin ich nicht sicher, wie man sie beide zum Arbeiten bringt ...

Irgendwelche Vorschläge?

Danke.

Answer 1

.change() doesn't trigger at all...

Das weil Ihre Eingaben .total-items und .total werden dynamisch auf das DOM von JavaScript hinzugefügt, so dass Sie Ereignis Delegation verwenden on():

$("body").on("change", ".total", function(e) { 
    calculate(); 
}); 

$("body").on("change", ".total-items", function(e) { 
    calculateTotal(); 
}); 

Hoffnung, das hilft.

Answer 2

Verwenden Ereignis Delegation

$(document).on('change',".total", function(e) { 
    calculate(); 
}); 

$(document).on('change',".total-items", function(e) { 
    calculateTotal(); 
});