Wie rufe ich eine Funktion auf Knopf klicken innerhalb eines modalen?

Question

Ich habe ein Modal, das ein Produkt und einen Zähler anzeigt, um die Anzahl der Artikel auszuwählen. Es gibt Auf- und Ab-Tasten, um die Menge zu erhöhen oder zu verringern. Hier ist die modale:

<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true"> 
    <div id="productDetailDialog" class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="counter" class="col-xs-6"> 
     <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
     <input id="qty" value="0" /> 
     <button id="down" onclick="modify_qty(-1)">-1</button> 
     <button id="up" onclick="modify_qty(1)">+1</button> 
     </div> 

Und hier ist die Skriptfunktion:

function modify_qty(val) { 
    var qty = document.getElementById('qty').value; 
    var new_qty = parseInt(qty, 10) + val; 

    if (new_qty < 0) { 
    new_qty = 0; 
    } 
    console.log("Inside script.js function. new_qty= " + new_qty); 
    document.getElementById('qty').value = new_qty; 
    return new_qty; 
} 

Der Zähler funktioniert gut, wenn ich nehme die #counterdiv und legen Sie sie in den Körper der HTML-Seite. Es ist nur im Modal, wo es nicht funktioniert. Ich gebe zur Konsole in der Funktion aus, und es scheint, dass die Funktion innerhalb des Modals nicht aufgerufen wird. Was mache ich falsch?

Answer 1

Sie zeigen nicht, wie/wo Sie das Javascript einfügen, aber wenn Sie sicherstellen, dass es im Bereich ist (überprüfen Sie Ihre Konsole Protokolle für Fehler), sollte es funktionieren.

Hier ist ein funktionierendes Beispiel: jsfiddle.net

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#productDetailModal">Open Modal</button> 
<div id="productDetailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="productDetailModal" aria-hidden="true"> 
<script> 
function modify_qty(val) { 
    var qty = document.getElementById('qty').value; 
    var new_qty = parseInt(qty, 10) + val; 

    if (new_qty < 0) { 
    new_qty = 0; 
    } 
    console.log("Inside script.js function. new_qty= " + new_qty); 
    document.getElementById('qty').value = new_qty; 
    return new_qty; 
} 
</script> 
    <div id="productDetailDialog" class="modal-dialog"> 
    <div class="modal-content"> 
     <div id="counter" class="col-xs-6"> 
     <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
     <input id="qty" value="0" /> 
     <button id="down" onclick="modify_qty(-1)">-1</button> 
     <button id="up" onclick="modify_qty(1)">+1</button> 
     </div> 
    </div> 
    </div> 
</div>