jQuery修改动态生成的HTML表

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>

现在，我试图让我的$('#edit_po_table tbody input').on("change", function(event) jquery代码部分工作，但我无法找到一种方法使其工作。

基本上，这就是我希望我的代码运行的方式，用户会看到一个产品表，然后他们从表中选择产品。选择通过jquery传递给functions.php，然后函数吐出edit_po_table的<tbody>数据。

然后用户需要填写所需的数量，表格应自动计算该行的总体积点数和价格。我已经尝试了不同的方法来获取<tr> id，然后转到<td>它只适用于第一行，我不能让它适用于任何其他行。

救命？

Answer 1

您可以在将jQuery.on修改为此后尝试

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

});

此语法等同于$.live，并且事件绑定也将持续用于动态添加的元素。 :)