如何为使用nested_form gem添加的字段编写javascripts？

Question

我正在尝试在表单中添加嵌套字段。我在设计和javascript方面遇到了一些问题。

这是视图

<%= nested_form_for @invoice,url: invoices_path,method: :post do |f| %>
<div class="row form-inline">
            <div class="col-lg-12">
              <ul id="sortable" class="append-table">
                <li class="table-responsive has-dropdown invoice-append">
                <div class="table items">
                    <div class="table-head">
                        <div class="th"></div>
                        <div class="th">#</div>
                        <div class="th">Name</div>
                        <div class="th">Description</div>
                        <div class="th">Quantity</div>
                        <div class="th">Item Price</div>
                        <div class="th">Total Price</div>
                        <div class="th">Taxable</div>
                        <div class="th"></div>
                        <div class="th"></div>
                    </div>
                    <div class="table-body ui-sortable">
                      <%= f.fields_for :invoice_line_items do |ff| %>
                    <div class="tr item">
                      <input type="hidden" class="invoice-item-id">
                      <input type="hidden" class="invoice-item-template-id" id="invoice_item_template_id">
                      <input type="hidden" class="invoice-item-display-order" id="invoice_item_display_order">
                        <div class="td handle-cell">
                           <div class="handle ui-sortable-handle"></div>
                        </div>
                        <div class="td display-order-cell">
                          <div>
                            <div class="display-order">1</div>
                          </div>
                        </div>

                        <div class="td">
                            <div class="form-group name-container">
                                <span class="twitter-typeahead" style="position: relative; display: inline-block;">
                                  <input type="text" class="form-control typeahead name prevent-enter tt-hint" maxlength="200" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">
                                  <input type="text" name="item0[name]" id="name" value="A" placeholder="Name" class="form-control typeahead name prevent-enter tt-input" maxlength="200" autocomplete="off" spellcheck="false" style="position: relative; vertical-align: top; background-color: transparent;" dir="auto"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: azo-sans-web, Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-invoiceItemTemplatesAutocomplete"></div></span></span>
                            </div>
                        </div>

                        <div class="td">
                            <div class="form-group description-container">
                                <textarea name="item0[description]" id="description" placeholder="Description" class="form-control description" maxlength="1000" style="overflow: hidden; word-wrap: break-word; resize: none; height: 60px;"></textarea>
                            </div>
                        </div>

                        <div class="td quantity-cell">
                            <div class="form-group">
                                <input type="text" name="item0[quantity]" id="quantity" value="5" placeholder="Qty" class="form-control quantity prevent-enter" size="5" maxlength="10">
                            </div>
                        </div>

                        <div class="td original-price-cell">
                            <div class="input-group">
                                <div class="input-group-addon">₹</div>
                                <input type="text" name="item0[original_price]" id="original_price" value="6.00" placeholder="Item Price" class="form-control original-price money-only prevent-enter" size="9" maxlength="9">
                            </div>
                        </div>

                        <div class="td price-cell">
                            <label class="price-display">₹30.00</label>
                            <input type="hidden" name="item0[price]" id="price" value="30.00" placeholder="Price" class="form-control price money-only" size="9" maxlength="9">
                        </div>

                        <div class="td is-taxable-cell">
                            <div class="checkbox">
                                <input type="checkbox" checked="checked" name="remember">
                                <label class="optional" for="remember"></label>
                              </div>
                        </div>

                        <div class="td remove-cell">
                        </div>

                        <div class="td save-invoice-item-template-cell">
                            <a href="#" class="js-save-as-invoice-item-template">Save to Use Again</a>
                        </div>
                    </div>
                    <% end %>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
<% end %>

我可以添加嵌套字段，但不会添加到：<div class="table-body">。

我面临的另一个问题是我无法提醒数量文本框的焦点事件的数量值。这就是我的尝试：

<script>
  $(document).ready(function(){
    $("#quantity").focusout(function(){
      alert($(this).val());
    });
  });
</script>

任何帮助将不胜感激。提前谢谢。