如何在模態內的按鈕點擊時調用一個函數？

Question

我有一個顯示產品和計數器來選擇項目數量的模式。有上下按鈕來增加或減少數量。這裏是模態：

<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> 

這裏是腳本函數：

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

計數器工作正常，如果我拿#counterdiv，並將其放置在HTML頁面的正文。只有在模式下，它不起作用。我在函數中輸出到控制檯，看起來函數沒有在模態內調用。我究竟做錯了什麼？

Answer 1

你沒有展示如何/在哪裏包含JavaScript，但如果你確定它在範圍內（檢查你的控制檯日誌中是否有錯誤），它應該可以工作。

這裏有一個工作示例： 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>