javascript - JQuery 和动态表行

Question

我正在尝试使用 jquery 构建一个购物车，但我花了很长时间才弄清楚如何使其全部正常工作。

我的网站上有一个供用户购买广告空间的地方。将有一个包含 5 列的表格(邮政编码列(输入)、服务列(选择框)、广告尺寸(选择框)、广告价格(只读输入)和用于添加或删除行的选项列。我一切正常正确，直到我想添加针对大型或小型广告的选项，并根据广告尺寸收取不同的价格。

        <table style='width: 100%;' id='adsTable'>
            <tr class='addedRow'>
                <td>Zip</td>
                <td>Service</td>
                <td>Ad Size</td>
                <td>Price</td>
                <td>Options</td>
            </tr>
            <tr>
                <td><input type='text' maxlength='5' class='zip' /></td>
                <td>
                    <select name='serviceType' class='serviceType rounded'>
                        <option value="">Choose One...</option>
                        <option>Plumbing</option>
                        <option>Roofing</option>
                        <option>HVAC</option>
                        <option>Appliance Repair</option>
                        <option>Flooring</option>
                        <option>Electrical</option>
                        <option>Doors/Windows</option>
                        <option>Siding</option>
                        <option>Other</option>
                    </select>
                </td>
                <td>
                    <select name='' class='ad_size'>
                        <option value='4.99' class='ad_lg'>Large</option>
                        <option value='1.99' class='ad_sm'>Small</option>
                    </select>
                </td>
                <td>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-usd"></i></span>
                        <input class='addPrice' value='4.99' type='text' readonly='readonly' />
                    </div>
                </td>
                    <td class='options'>

                    </td>
            </tr>

        </table>

我剥离了我的 jquery 并开始了几次尝试弄清楚这一切，但一直卡在如何在选择广告尺寸后添加所有输入。这是我来到这里之前结束的 jquery

    //Varible that stores the extra table row
    var $adTableRow = "<tr class='addedRow'><td><input type='text' maxlength='5' /></td><td><select name='serviceType' id='serviceType' class='rounded'><option value=''>Choose One...</option><option>Plumbing</option>    <option>Drain Cleaning</option><option>Roofing</option><option>HVAC</option><option>Appliance Repair</option><option>Flooring</option>  <option>Electrical</option><option>Doors/Windows</option><option>Siding</option><option>Other</option></select></td><td><select name='' class='ad_size'><option value='4.99' class='ad_lg'>Large</option><option value='1.99' class='ad_sm'>Small</option></select></td><td><div class='input-prepend'><span class='add-on'><i class='icon-usd'></i></span><input class='addPrice' value='4.99' type='text' readonly='readonly' /></div></td><td class='options'><i class='icon-remove removeAd' title='Remove This Ad'></i></td></tr>";

    $(document).ready(function() {  
        $('#addTotalBox').val("4.99");
        //Assign the right price amount according to users selection
        $(".ad_size").on('change', function() {
            //Grab the value of the select box and store it in a variable
            var ad_cost = $(this).val();
            //Insert the value into the pricing box             
            $(this).parent().next().children().find('.addPrice').val(ad_cost);
            //Set the total box to the right price according to ad size
            $('input').each(function(index,data) {
                var value = $(this).val();
            });
        });

        $('.addRow').on('click', function() {
            $("#adsTable").append($adTableRow);
            firstRow = false;


            //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

        });
                });

感谢您提前提供的帮助

Answer 1

根据我上面的评论，您需要将逻辑放入函数中，然后在添加新行时重新初始化该函数。

function reInit(){
    $(".ad_size").on('change', function() {
        console.log('test');
        //Grab the value of the select box and store it in a variable
        var ad_cost = $(this).val();
        //Insert the value into the pricing box             
        $(this).parent().next().children().find('.addPrice').val(ad_cost);
        //Set the total box to the right price according to ad size
        $('input').each(function(index,data) {
            var value = $(this).val();
        });
    });
}

然后，调用它:

$('.addRow').on('click', function() {
    $("#adsTable").append($adTableRow);
    firstRow = false;

    reInit();
    //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

});

这是工作 fiddle http://jsfiddle.net/QwnuR/2/