Javascript 使用cocoon rails动态生成嵌套表单

我有一个带有cocoon的嵌套表单，但在试图从JavaScript计算我的总价时遇到了一个问题。当我检查查看源页面时，从字段生成的属性没有值属性。如果我使用

@invoice.line\u items.build

，则会计算总价，但看不到cocoon的动态字段。谢谢，等待我能尽快得到的任何帮助

   class InvoicesController < ApplicationController

     before_action :set_invoice,:set_line_item, only: [:show, :edit, :update, :destroy]

     def index
       @invoices = Invoice.all
     end

     def show
     end

     def new
       @invoice = Invoice.new
      @invoice.line_items.build
     end

     # GET /invoices/1/edit
     def edit

     end

     def create
       @invoice = Invoice.new(invoice_params)
       respond_to do |format|
        if @invoice.save
          format.html { redirect_to @invoice, notice: 'Invoice was successfully created.' }
          format.json { render :show, status: :created, location: @invoice }
        else
          format.html { render :new }
          format.json { render json: @invoice.errors, status: :unprocessable_entity }
        end
      end
    end

    def update
      respond_to do |format|
        if @invoice.update(invoice_params)
          format.html { redirect_to @invoice, notice: 'Invoice was successfully updated.' }
          format.json { render :show, status: :ok, location: @invoice }
        else
          format.html { render :edit }
          format.json { render json: @invoice.errors, status: :unprocessable_entity }
        end
      end
    end

    def destroy
      @invoice.destroy
      respond_to do |format|
        format.html { redirect_to invoices_url, notice: 'Invoice was successfully destroyed.' }
        format.json { head :no_content }
      end
    end


    private

    # Use callbacks to share common setup or constraints between actions.
    def set_invoice
      @invoice = Invoice.find(params[:id])
    end

    def set_line_item
      @line_item = LineItem.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.    
     def invoice_params
       params.require(:invoice).permit(:amount, :date, :currency, {line_items_attributes: 
        [:id,:quantity,:net_amount, :description, :unit_cost]})
     end

   end

---

使用以下代码附加事件：

$('.unit_cost').blur(update_price); 
$('.quantity').blur(update_price); 

但是，这只会在运行此命令时将事件处理程序绑定到页面上的元素，并且有更好的方法来实现这一点：

$(document).on('blur', '.unit_cost, .quantity', update_price)

---

我将事件附加到顶级

文档

（这样它甚至可以与TurboLink兼容，但您也可以使用随附的

表单

或div），我们对

模糊

事件进行响应，但仅当触发元素具有class

单位成本

或

数量

时

使用以下代码附加事件：

$('.unit_cost').blur(update_price); 
$('.quantity').blur(update_price); 

但是，这只会在运行此命令时将事件处理程序绑定到页面上的元素，并且有更好的方法来实现这一点：

$(document).on('blur', '.unit_cost, .quantity', update_price)

---

---

我将事件附加到顶级

文档

（这样它甚至可以与TurboLink兼容，但您也可以使用随附的

表单

或div），我们对

模糊

事件进行响应，但仅当触发元素具有class

单位成本

或

数量

时

javascript函数

update\u price

何时调用？它不起作用吗？您是否使用cocoon回调来触发它？你现在能告诉我们怎么称呼它吗？谢谢你的回复。我没有使用cocoon回调来触发它。在数量和单位成本字段中插入值时，将调用更新价格。该方法返回总价。但使用cocoon生成的字段，update_方法似乎不起作用，当我尝试查看cocoon generated字段中传递的内容时，即使是通过PageSource，该字段也是空白的。您能告诉我们如何将

update\u price

链接到数量和单位成本字段的更改事件吗？我使用了函数bind（）下面的函数{$（'单位成本'）.blur（更新价格）；$（'数量'）.blur（更新价格）；}javascript函数

update\u price

何时调用？它不起作用吗？您是否使用cocoon回调来触发它？您能告诉我们现在如何调用它吗？感谢您的响应。我没有使用cocoon回调来触发它。当我在quantity and unit\u cost字段中插入一个值时，将调用update\u price。该方法返回总价。但使用cocoon generated字段时，update_方法似乎不起作用，当我尝试查看cocoon generated字段中传递的内容时，即使通过页面源也会显示为空白。您能告诉我们如何将

update_price

链接到数量和单位成本字段的更改事件吗？我使用了下面的函数函数bind（）{$（'.unit_cost'）.blur（update_price）；$（'.quantity'）.blur（update_price）；}谢谢@nathanvda，我按照说明应用了更改，并且成功了。在插入生成的字段值后，我仍然存在一个问题，它似乎没有保存在数据库中。我只能保存“@invoice.line_items.build”的字段值方法，但不是从add_item字段。它可能有什么问题。ThanksA有点难说，因为您没有显示整个表单，但有一些可能的原因：使用html id而不是类（不允许重复id，因此它只会上载表单中第一次出现的id），或您的

链接到\u添加\u关联

将项目添加到表单之外。我发现在

链接

之前有一个

，因此这可能会强制关闭表单（如果它是在表内启动的）。否则，也许你应该问另一个问题并提供更多详细信息。好的，谢谢你给出的详细解释，但我的意思是“添加字段”按钮没有为每个行项目生成唯一的id，这使得它无法与第一行项目一起保存。显示发布到控制器的内容（检查日志）。如果项目已发布到控制器，则应将其保存。我是说它们可能没有。如果您开始一个新问题，可能会更清晰，因为我不确定我是否完全理解您的新问题。请将其链接到此处，以便我可以查看。好的，刚刚完成此操作，链接为：谢谢@nathanvda，我已按说明应用更改，并且它是已工作。在插入生成的字段值后，我仍然有一个问题，它似乎没有保存在数据库中。我只能保存“@invoice.line_items.build”的字段值方法，但不是从add_item字段。它可能有什么问题。ThanksA有点难说，因为您没有显示整个表单，但有一些可能的原因：使用html id而不是类（不允许重复id，因此它只会上载表单中第一次出现的id），或您的

链接到\u添加\u关联

将项目添加到表单之外。我发现在

链接

之前有一个

，因此这可能会强制关闭表单（如果它是在表内启动的）。否则，也许你应该问另一个问题并提供更多详细信息。好的，谢谢你给出的详细解释，但我的意思是“添加字段”按钮没有为每个行项目生成唯一的id，这使得它无法与第一行项目一起保存。显示发布到控制器的内容（检查日志）。如果项目已发布到控制器，则应将其保存。我是说可能没有。如果您开始一个新问题，可能会更清楚，因为我不确定是否已保存

$(document).on('blur', '.unit_cost, .quantity', update_price)