javascript - 動的に生成された HTML テーブルの jQuery 修正

Question

私は次の表を持っています

    <table id="edit_po_table">
        <thead>
            <tr>
                <th>Discount</th>
                <th>
                    <select id="discount">
                        <option value="0">0%</option>
                        <option value="25">25%</option>
                        <option value="35">35%</option>
                        <option value="42">42%</option>
                        <option value="50">50%</option>
                    </select>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Quantity</th>
                <th>Stock #</th>
                <th>Product Name</th>
                <th>Volume Points</th>
                <th>Price</th>
                <th>Volume Total</th>
                <th>Line Total</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

そして、次のjQueryコード

    $('#table_po_product_list :checkbox').click(function() {

        if($("#table_po_product_list :checkbox").prop('checked')) {

            var i = $("#table_po_product_list input:checked").length;
            $('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));

        } else {

            var i = $("#table_po_product_list input:checked").length;
            $('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));

        }

        var stocknos = $('#table_po_product_list :checked').map(function(){
                return $(this).val();
            }).get().join(',');

        if($('#table_po_product_list :checked').length === 0) {
            $('#edit_po_table tbody').html('');
        }

        alert(stocknos);

        if (stocknos.length > 0) {
            $.ajax({
                type: "POST",
                url: "functions.php",
                data: "ids=" + stocknos, //{'stock_nos[]': stocknos},
                cache: false,
                success: function(html) {

                    $('#edit_po_table tbody').html(html);

                }
            });
        }

    })


    $('#edit_po_table tbody input').on("change", function(event){


            var tdid = $(this).attr('id');

            var qty = $('#edit_po_table tbody tr#'+tdid+' td input').val();

            var vol = $('#edit_po_table tbody tr#'+tdid+' td#vol_pts').text();

            var price = $('#edit_po_table tbody tr#'+tdid+' td#price').text();

            alert(tdid);

            $('#edit_po_table tbody tr#'+tdid+' td#total_vol').html(qty*vol);
            $('#edit_po_table tbody tr#'+tdid+' td#total_price').html(qty*price);

    })

functions.php は、尋ねられると以下を返します。

<tr id=0141>
<td><input type="text" size="5"></td>
<td>0141</td>
<td>Formula</td>
<td id="vol_pts">23.95</td>
<td id="price">68.49</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>

<tr id=6424>
<td><input type="text" size="5"></td>
<td>6424</td>
<td>Reference Guide (Bilingual)</td>
<td id="vol_pts">0.00</td>
<td id="price">9.20</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>

現在、コードの jquery セクションを機能させようとして$('#edit_po_table tbody input').on("change", function(event)いますが、機能させる方法が見つかりません。

基本的に、これは私のコードが機能する方法です。ユーザーには製品テーブルが表示され、テーブルから製品を選択します。選択内容は jquery 経由で functions.php に渡さ<tbody>れ、そこから edit_po_table のデータが返されます。

次に、ユーザーは必要な数量を入力する必要があり、テーブルはラインの合計ボリューム ポイントと価格を自動計算する必要があります。<tr>IDを取得するためにさまざまな方法を試し<td>ましたが、最初の行でのみ機能し、他の行では機能しません。

ヘルプ？