Запуск jQuery Coffeescript при изменении ввода

Question

У меня есть функция jQuery Coffeescript, которая запускается при загрузке страницы. Функции захватывают строку таблицы, тогда это цена, количество и скидки и обрабатывает значения, чтобы определить общее количество для строки.

В настоящее время я запускаю функцию на загрузке страницы, но также хотел бы, чтобы она запускалась в любое время, когда изменяются значения ввода формы. Обратите внимание: эта форма используется на rails 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 полей

<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

Объявить функцию, запустить его на странице загрузки, а также на вашем keyup случае.

В качестве альтернативы вы можете предоставить своим пользователям возможность обновлять информацию, отображаемую на экране, путем запуска кода на click на кнопке.