Question

我有一个在页面加载时运行的jQuery Coffeescript函数。函数抓取表格行，然后是价格，数量和折扣，并处理这些值以确定行的总计。

我目前在页面加载时运行该函数，但也希望它在表单输入值发生变化时运行。请注意，此表单用于导轨f.fields_for，它可生成多个表单以及其他动态生成的表单。

最干的方法是什么？

$('tr.order-item').each ->
  q = $(this).find('.quantity_input')
    .val()
  quantity = parseInt(q)
  p = $(this).find('.price').text().replace("$", "")
  price = parseFloat(p.replace(/,/g, ''), 10)
  d = $(this).find('.discount_input').val()
  discount = parseFloat(d)
  total = price * quantity - discount
  total_price = "$"+ parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString()
  $(this).find('.item-total').text(total_price)

form_for fields

<tr class="order-item">
<td>
    <div class="btn-group">
        <button type="button" class="btn-u dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-angle-down"></i>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
            </li>
            <%= f.hidden_field :_destroy %>
            <%= link_to "Remove Item", '#', class: "remove_fields btn btn-link" %>
            <li><button class="btn btn-link">Add Custom Item</button></li>
            <li><button class="btn btn-link">Remove Item</button></li>
        </ul>
    </div>
</td>
<td>
    <h5 class="product"><%= f.object.product.name %></h5>
    <%= f.hidden_field :product_id, class:"product-id" %>
    <%= f.hidden_field :id, class:"id" %>
</td>
<td>
    <h5 class="text-right"><span style="color: green" class="price"><%= number_to_currency f.object.unit_price %></span></h5>
</td>
<td>
    <%= f.number_field :quantity, min: 1, hide_label: true, class:"quantity_input" %>
</td>
<td>
    <%= f.text_field :discount, hide_label: true, class:"discount_input" %>
</td>
<td>
    <h5 class="text-right"><span style="color: green" class="item-total"></span></h5>
</td>

Answer 1

一种方法是在任何输入字段中侦听keyup事件，然后更新值：

updateOrderItems = ->
  $(document).find('tr.order-item').each ->
    q = $(this).find('.quantity_input').val()
    quantity = parseInt(q)
    p = $(this).find('.price_value').text()
    price = parseFloat(p)
    d = $(this).find('.discount_input').val()
    discount = parseFloat(d)
    total_price = price * quantity - discount
    $(this).find('.item-total').text("$"+ parseFloat(total_price).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString())

updateOrderItems()
$(document).on 'keyup', 'tr.order-item input', updateOrderItems

将选择器传递给.on()将解决您的ajax问题。

在页面加载和密钥上运行代码

声明一个函数，在页面加载时以及keyup事件上运行它。

作为替代方案，您可以通过在按钮上click触发代码，让用户可以更新显示的信息。

输入更改时运行jQuery Coffeescript

1 个答案: