未捕获的类型错误：$(...)[0].reset 不是函数答案

【问题标题】：Uncaught TypeError: $(...)[0].reset is not a function未捕获的类型错误：$(...)[0].reset 不是函数
【发布时间】：2019-10-08 11:12:44
【问题描述】：

目标

表单提交成功后，我想将表单重置为空。

问题

提交表单后，我在控制台中收到以下错误消息：Uncaught TypeError: $(...)[0].reset is not a function

当我在重置之前 console.log 我的内容时，我得到了表单：<div id=new-store-form>..</div>

到目前为止我检查过的内容

在我的应用程序中没有 ID、类或其他任何称为“重置”的内容
纯 javascript document.getElementById('new-store-form').reset(); 得到相同的错误消息。

代码意见/商店/index.html.erb

<div class="show-panel-form"></div>
  <%= render "partials/show_panel_stores_overview"%>
</div>

views/partials/show_panel_stores_overview.html.erb

<%= link_to 'New store', new_store_path, remote: true %>

views/stores/new.js.erb

var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);

视图/商店/_form

<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>

views/stores.create.js.erb

var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);
console.log($("#new-store-form")[0])
$("#new-store-form")[0].reset(); // doesn't work

存储控制器

def new
    @store = current_user.store.build
    @store.age_tables.build
    respond_to do |format|
      format.html { redirect_to root_url, alert: 'Page not accessible' }
      format.js
    end
    authorize @store

  end

  def create
    @store = current_user.stores.create(store_params)
    authorize @store
    if @store.save
      respond_to do |format|
        format.js
      end
    else
      format.js
    end
  end

【问题讨论】：

<div>s 没有reset() 方法。
好的，除非我遗漏了什么，var form = $("<%= j(render 'form') %>"); 不会创建表单，因为 Ruby 仍然需要处理这个。
您好 VLAZ，感谢您的回复。我渲染 new.js.erb 视图，它反过来通过使用包装器变量将表单部分插入到我的 div 中来渲染表单。此外，它正在保存对象，因此 create 函数似乎也可以正常工作。
但是您将插入字符串 "<%= j(render 'form') %>" - 这不会做任何事情，除非您有 something 可以将其拾取并呈现它，它不会做任何事。
如果我误解了您的观点，请纠正我。表单输入正在保存，因此创建操作似乎有效。我目前遇到的问题是填写的表格包括。有效输入的绿色检查（？）保留在屏幕上而不是消失。

标签： javascript ruby-on-rails ajax simple-form

【解决方案1】：

使用匹配表单的选择器，而不是包装器$('#new-store-form form').reset()（注意额外的“表单”用于选择 div 内的实际表单标签）

【讨论】：