从innerHTML计算总复选框[重复]

Question

HTML

<select style="margin-left: 10px;" id="myDropDown">
        <option value='' disabled selected>Assign Table</option>
        <option value='1'>Table1</option>
        <option value='2'>Table2</option>
        <option value='3'>Table3</option>
    </select>
<div id="myTable">
          
        </div>
        <input type="text" id="total" value="0" readonly="readonly" />

Javascript

$('#myDropDown').change(function() {
        //Selected table
        var inputValue = $(this).val();
        var HTML;
        var HTML2;
        if (inputValue == 1) {
        HTML = '<div><input id="test-element" type="checkbox" price="1">price 1</div><br><div><input id="test-element" type="checkbox" price="2">price 2 </div>';
       }
       else if(inputValue == 2) {
       HTML = '<div><input id="test-element" type="checkbox" price="3">price 3 </div><br><div><input id="test-element" type="checkbox" price="4">price 4 </div>';
      }
      document.getElementById('myTable').innerHTML = HTML;
   });
    
    function calcAndShowTotal(){
    var total = 0;
    $('#myTable :checkbox[checked]').each(function(){
        total += parseFloat($(this).attr('price')) || 0;
        alert("working");
    });
    $('#total').val(total);   
}

$(document).on("click",'#myTable :checkbox',function() {
      //alert("working");
    calcAndShowTotal();
});

calcAndShowTotal();

我做了一个下拉菜单，用 .innerHTML 在不同的复选框之间切换。我将点击功能更新为 $(document).on ，它适用于每次点击，但总值不会改变。为什么 calcAndShowTotal 函数不起作用？我也尝试将其更改为 $(document).on 但它不计算总数。例如检查小提琴链接。 http://jsfiddle.net/7yf8sdpw/95/

Answer 1

id为myTable的div没有checkbox类型的子input元素，不像id为price list的div。

您究竟希望这部分代码做什么？所以我可以提供更好的帮助...