Question

我正在尝试创建一个购物车，用户从表中选择所需的披萨和大小，信息以不同区域（#orderList）内的表格格式显示。我想这样做，以便用户可以更改数量和项目以及价格变化。我认为它与同一行中的两个不同价格有关，但我不确定。

这是我目前所拥有的：

HTML：

<div id="order_column">
    <h2 class="order_column_header">
        Current Order
    </h2>
    <table id="orderList">

    </table>
</div>

<div id="pizzaTableContainer" class="pizzaConatiner container overflowConatiner">
    <table class="menuTable pizza" id="pizzaTable">
        <tr>
            <th class="tableHeader" colspan="500">Standard Pizzas</th>
        </tr>
        <tr>
            <th id="pizzaHeader">Pizza</th>
            <th>Small</th>
            <th>Large</th>
        </tr>
        <tr>
            <td class="desc">Tomato & Cheese</td>
            <td id="spizza1" class="spizza orderChoice">5.50</td>
            <td id="lpizza1" class="lpizza orderChoice">9.75</td>
        </tr>
        <tr>
            <td class="desc">Onions</td>
            <td id="spizza2" class="spizza orderChoice">6.85</td>
            <td id="lpizza2" class="lpizza orderChoice">10.85</td>
        </tr>
        <tr>
            <td class="desc">Peppers</td>
            <td id="spizza3" class="spizza orderChoice">6.85</td>
            <td id="lpizza3" class="lpizza orderChoice">10.85</td>
        </tr>
        ...
        ...
        ...
    </table>
</div>

JQuery的：

$('.spizza').click(function () {
    $('#orderList')
    .append($('<tr>')
    .append($('<td>').text("Small " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
    .append($('<td class="qty">')
    .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
    .append($('<td>').text($(this).parent().children('.spizza').text()))
    .append($('<td class="cross">').html('&#10006;')));
});

$('.lpizza').click( function() {
    $('#orderList')
    .append($('<tr>')
    .append($('<td>').text("Large " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
    .append($('<td class="qty">')
    .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
    .append($('<td>').text($(this).parent().children('.lpizza').text()))
    .append($('<td class="cross">').html('&#10006;')));
});


$('.inputField').on('change', function () {
    var totalCost = $(this).parent().parent().find('.orderChoice').val() * this.value;
    $('#total').attr('$', totalCost);
});

Answer 1

您需要使用.val（）而不是.attr（）
您需要将on keyup委托给动态字段$("#orderList").on('keyup','input[name="quantity"]', function() {
给出一个类并使用最接近的
您不需要使用逗号
我也简化了您的小型和大型披萨选择。

还有更多问题，但那些是最重要的问题

＆＃13;

    $(function() {
      
        $('.apizza').click(function () {
            var size = this.id.indexOf("lpizza") !=-1?"Large":"Small";
            $('#orderList')
            .append($('<tr>')
            .append($('<td>').text(size+" " + $(this).parent().children('.desc').text() + " " + $('#pizzaHeader').text()))
            .append($('<td class="qty">')
            .append($('<input type="number" name="quantity" min="1" class="inputField" style="width:30px">').val(1)))
            .append($('<td class="price">').text($(this).text()))
            .append($('<td class="cross">').html('&#10006;')));
        });

        $("#orderList").on('keyup','input[name="quantity"]', function() { 
          var total = 0;
          $("#orderList tr").each(function() {
            var price = $(this).find(".price").text(),
                qty=$(this).find(".qty>input").val(),
                cost = price * parseInt(qty,10); 
          total += cost;  
          $('#total').text('$'+ total.toFixed(2)); 
        }); 
      }); 
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="order_column">
        <h2 class="order_column_header">
            Current Order
        </h2>
        <table>
          <tbody id="orderList">
          </tbody>
          <tfooter><tr><td id="total"></td></tr></tfooter>
        </table>
    </div>

    <div id="pizzaTableContainer" class="pizzaConatiner container overflowConatiner">
        <table class="menuTable pizza" id="pizzaTable">
            <tr>
                <th class="tableHeader" colspan="500">Standard Pizzas</th>
            </tr>
            <tr>
                <th id="pizzaHeader">Pizza</th>
                <th>Small</th>
                <th>Large</th>
            </tr>
            <tr>
                <td class="desc">Tomato & Cheese</td>
                <td id="spizza1" class="apizza orderChoice">5.50</td>
                <td id="lpizza1" class="apizza orderChoice">9.75</td>
            </tr>
            <tr>
                <td class="desc">Onions</td>
                <td id="spizza2" class="apizza orderChoice">6.85</td>
                <td id="lpizza2" class="apizza orderChoice">10.85</td>
            </tr>
            <tr>
                <td class="desc">Peppers</td>
                <td id="spizza3" class="apizza orderChoice">6.85</td>
                <td id="lpizza3" class="apizza orderChoice">10.85</td>
            </tr>
        </table>
    </div>

＆＃13;

Answer 2

请尝试：

$('#orderList').on('change', '.inputField',  function () {});

已经在stackoverfow上给出了这个问题的更深层次的解释：

Jquery event handler not working on dynamic content

根据表格中有多个价格的数量更改价格

2 个答案: