Question

想知道为什么我的价格列在对ajax调用json之后没有在页面加载时呈现。我有两个jsfiddle示例，其中第一个https://jsfiddle.net/ujaet94z/45不加载价格，而第二个https://jsfiddle.net/ujaet94z/35加载价格？

唯一的变化是删除<a>标签和一行中的<div>。 -我需要将这些元素保留在DOM中，但无法弄清楚为什么是问题所在？他们需要留在<td>内以进行样式设置，但导致价格总计未更新。

由于某些原因，<div>中包含<tr><td>似乎破坏了在价格列中呈现结果的能力吗？删除<div>后-价格显示出预期的效果，但是样式却被破坏

45：

$(".item-row:last").after(
                  '<tr class="item-row">'+
                  '<td class="item-name">'+
                  '<div class="delete-wpr">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea>'+
                  '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                  '<a class="add-product" href="javascript:;" title="Add Product">A</a></div></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td>'+
                  '<td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

35：

$(".item-row:last").after(
                  '<tr class="item-row">'+
                  '<td class="item-name">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td>'+
                  '<td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

JS：

function update_price() {
  var row = $(this).parents('.item-row');
  var price = row.find('.cost').val().replace("$", "") * row.find('.qty').val();
  price = roundNumber(price, 2);
  isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html("$" + price);

  update_total();
}

function bind() {
  $(".cost").focus(update_price);
  $(".qty").focus(update_price);
}

$(document).ready(function() {

  $("#paid").blur(update_balance);

  $('.add-invoice').on('click', function() {
    $("#invoice_div").css("display", "block");
    $.ajax({
      url: '/echo/json/',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      data: {
        json: JSON.stringify(myjson)
      },
      success: function(data) {

        var result = [];
        $.each(data, function(i, e) {
          var matchingItems = $.grep(result, function(item) {
            return item.customer === e.customer && item.cust_id === e.cust_id;
          });

          if (matchingItems.length === 0) {
            result.push(e);
          }
        });

        populateSelectBoxes($('#invoice_div #ddinvoice'), result);

        function populateSelectBoxes($select, result) {
          var invoices = [];
          $.each(result, function() {
            invoices.push('<li data-value="' + this.cust_id + '">' + this.customer + ' : ' + this.invoice + '</li>');
          });
          $select.append(invoices.join(''));
        }

        function populateTableRow(data, selectedProductAutonum) {
          var invoices; //fill with JSON
          var lastRow = $(".item-row:last");
          $.each(data, function(i, e) {
            if (this.cust_id == selectedProductAutonum) {
              invoices = this;
              custProducts = data.filter(({
                cust_id
              }) => cust_id === selectedProductAutonum);

                $(".item-row:last").after(
                  '<tr class="item-row"><td class="item-name">'+
                  '<textarea form ="testinsert" name="item_name['+i+']">Item Name</textarea>'+
                  '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                  '<a class="add-product" href="javascript:;" title="Add Product">A</a></div></td>'+
                  '<td class="description"><textarea form ="testinsert" name="item_desc['+i+']">Description</textarea></td>'+
                  '<td><textarea class="cost" form ="testinsert" name="item_cost['+i+']">$0</textarea></td><td><textarea class="qty" form ="testinsert" name="item_qty['+i+']" autofocus>0</textarea></td>'+
                  '<td><span class="price" form ="testinsert" name="item_price['+i+']">$0</span></td></tr>');

            if ($(".delete").length > 0) $(".delete").show();
            bind();

                    $('#address-title').val(invoices.customer);
                    $('#address-one').val(invoices.address);
                    $('#invoice_num').val(invoices.invoice);
                    $('#paid').val(invoices.paid);
                    $('#owed').val(invoices.sales);
                    $('#auto_num').val(invoices.autonum);
                    $('[name="item_name['+i+']"]').val(invoices.product);
                    $('[name="item_desc['+i+']"]').val(invoices.description);
                    $('[name="item_cost['+i+']"]').val(invoices.cost);
                    $('[name="item_qty['+i+']"]').val(invoices.quantity);
                    $('[name="item_price['+i+']"]').val(invoices.price);
            }
          });
          lastRow.remove();

        }

        $('#invoice_div #ddinvoice li').click(function(e) {
          var selection = $(this).attr("data-value");
          $(this).parent().parent().parent().hide();
          populateTableRow(data, selection);
          $('ul').empty();

Answer 1

感谢@Teemu对.html和.val的澄清，以及需要同时使用两者来解决此问题：

$.each(data, function(i, e) {
        if (this.cust_id == selectedProductAutonum) {
          invoices = this;
          custProducts = data.filter(({
            cust_id
          }) => cust_id === selectedProductAutonum);

            $(".item-row:last").after(
              '<tr class="item-row">'+
              '<td class="item-name">'+
                '<div class="delete-wpr">'+
                    '<textarea form ="testinsert" name="item_name[]">' + invoices.product + '</textarea>'+
                    '<a class="delete" href="javascript:;" title="Remove row">X</a>'+
                    '<a class="add-product" href="javascript:;" title="Add Product">A</a>'+
                '</div>'+
              '</td>'+
              '<td class="description"><textarea form ="testinsert" name="item_desc[]">' + invoices.description + '</textarea></td>'+
              '<td><textarea class="cost" form ="testinsert" name="item_cost[]">' + '$' + invoices.cost + '</textarea></td>'+
              '<td><textarea class="qty" form ="testinsert" name="item_qty[]">' + invoices.quantity + '</textarea></td>'+
              '<td><span class="price" form ="testinsert" name="item_price[]">' + '$' + invoices.price + '</span></td></tr>');

            if ($(".delete").length > 0) $(".delete").show();
            bind();

            $('#address-title').val(invoices.customer);
            $('#address-one').val(invoices.address);
            $('#invoice_num').val(invoices.invoice);
            $('#paid').val(invoices.paid);
            $('#owed').val(invoices.sales);
            $('#auto_num').val(invoices.autonum);

            //console.log($('.item-row:last').html());
        }
      });
      lastRow.remove();
      update_total();
}

计算ajax电话的产品价格

1 个答案: