Jquery ajax填充select并在更改时运行ajax以获取表行输入的值
我正在为私人项目制作发票工具。 我也在使用bootstrap。 到目前为止，所有事情都是完美的，无论我尝试什么，我似乎无法让这些碎片一起工作。
摘要：页面加载了2行订单项。 每行都有一个jquery函数，当qty和rate改变时，它会改变小计。 我有一个按钮，它将根据需要添加和删除行，主要项目选择列表将在mousedown ajax获取可用项目.ALL这些工作完美..至少单独。
在这个堆栈问题中找到的资源解决了我之前的问题，即正确添加/删除新行… WIN！ 但是，我创造了两个新的问题，我似乎无法通过这样做来动摇。
这是加载html的页面（表是id = lineitem）
DISCOUNT BALANCE DUE 包含的.js文件
$(function() { CalculateTotal(); // Adding the change events for the Price and // quantity fields only.. // Changing the total should not affect anything $('#qty , #rate, #discount').on('change', function() { UpdateTotals(this); }); }); function UpdateTotals(elem) { // This will give the tr of the Element Which was changed var $container = $(elem).parent().parent(); var quantity = $container.find('#qty').val(); var price = $container.find('#rate').val(); var subtotal = parseInt(quantity) * parseFloat(price); $container.find('.amount').val(subtotal.toFixed(2)); CalculateTotal(); } function CalculateTotal(){ // This will Itearate thru the subtotals and // claculate the grandTotal and Quantity here var lineTotals = $('.amount'); var discount = $('#discount').val(); var grandTotal = 0.0; $.each(lineTotals, function(i){ grandTotal += parseFloat($(lineTotals[i]).val()) ; }); var total = parseFloat(grandTotal-discount ).toFixed(2); $('.balance').val(total); $('#ibalance').text(total); } function itemList() { //var id=$(this).val(); //var dataString = 'id='+ id; $.ajax ({ type: "POST", url: "api/api.get-list.php?type=item", cache: false, async: false, success:function(data) { result = data; } }); return result; } $("select.itemID").mousedown(function(){ var $this = $(this); if (data) { $(this).val(data); } else { itemList(); $(this).html(result); } }); $('form').on('click', '.removeVar', function(){ $(this).closest('tr').remove(); $('.count').each(function(i){ $(this).text(i + 1); }); }); $('#addVar').on('click', function(){ var varCount = $('#lineitem tr').length; $node = ['', ''+varCount+' ', '', 'Product/Service', ' ', ' '].join('\n'); $('#lineitem > tbody:last').append($node); }); $("#lineitem").on('change', ".itemID", function(){ var row = $(this).closest('tr'); var itemID = row.find(".itemID").val(); //alert(itemID); $.ajax ({ type: "POST", url: "api/api.items.php?mode=fetch&id="+itemID, cache: false, success: function(html) { row.find(".itemdetail").html(html); //alert(html); } }); });
试图让最后一个函数变得更容易是我绝望的尝试在更改时获取select.itemID来调用ajax函数来获取所有行项目详细信息并将它们放在正确的位置。 （细节和费用）
当所有这些插入时。我可以从选择列表中选择并填充结果（虽然它的毛刺很少 – 基本上它需要2次尝试才能真正看起来选择了该项目）此操作没有其他任何内容。 我可以从页面加载更改2行的数量和速率。 所有ajax调用都在发送正确的数据。
什么失败，添加一行并使用选择不起作用，也没有添加总计。
这是一个我知道的混乱，但我真的需要一些帮助搞清楚这一点。