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();

});

这是工作小提琴http://jsfiddle.net/QwnuR/2/

JQuery和动态表行

1 个答案: