Jquery 表单提交无法使用 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb

Posted

技术标签:

【中文标题】Jquery 表单提交无法使用 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb【英文标题】:Jquery form submit not working with AJAX and Rails re-renders index.html.erb inexplicably 【发布时间】:2018-01-19 11:16:59 【问题描述】:

我在使用 jquery/ajax html 更新表单时遇到了最奇怪的问题。

我的应用程序是一个使用 Rails 控制器的单页 TODO 应用程序,但所有 DOM 更改都通过 Jquery/Ajax 进行。 TODO 通过 javascript 渲染到页面后,每个 TODO 都有一个编辑按钮。

单击编辑按钮时,会发出一个 API 请求,该请求会导致将更新表单附加到 DOM。

但是,当单击该表单中的更新按钮时,Jquery 无法识别它,并且由于某种未知原因,Rails 每次都会重新呈现 Index.html.erb 页面。我已经为选择器尝试了 10 种不同的解决方案,但没有任何效果。

选择将编辑表单附加到DOM的方法在这里:

  $(document).on("click", ".ugh3", function(e) 
      e.preventDefault()
  let id = e.target.id
  let event = e
  $.ajax(
    type: "GET",
    url: `/todos/$id`,
    success: function(response) 
        let newTodo = new Todo(response)
        let todoHtml = newTodo.formatEdit()
        $('.todo-list').append(todoHtml)
    
  )
 )

上述调用完美无缺。但是,当我尝试让表单提交或单击以工作时,它永远不会识别它并且 Index.html.erb 页面被重新提交。我试过 preventDefault 并返回 false 如下所示:

  $("form.edit_todo").on("submit", function (e) 
   debugger
   e.preventDefault();
   return false;
  )

如果有人有几分钟的时间来看看这个,我将不胜感激。这已经让我发疯了两天了。非常感谢!

git repo 是:https://github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js

【问题讨论】:

【参考方案1】:

当您动态附加表单时,提交处理程序 - $("form.edit_todo").on("submit", ... - 不会触发,因为在绑定时表单在 DOM 中尚不存在。

类似于您在.ugh3 类上使用的点击事件,您需要针对文档注册提交事件:

$(document).on('submit', 'form.edit_todo', function (e) ... )

document 是一个常量——它会一直存在,因此任何事件监听器都可以绑定它。当submit 事件被触发时,document 检测到它(事件冒泡的结果),jQuery 将获取目标元素(导致事件的元素)并将其与任何已注册的处理程序进行比较(处理程序与您一起创建@ 987654327@函数)。如果匹配,它将执行该处理程序。

【讨论】:

【参考方案2】:

您好,我有一些建议给您: 您是否将代码放在 jquery 的 document.ready() 函数中。像下面这样:

$(document).ready(function()
   $("form.edit_todo").on("submit", function (e) 
     debugger
     e.preventDefault();
     return false;  ); );

我认为这应该有效,记住“form.edit_todo”指的是表单对象

【讨论】:

是的,它肯定在 document.ready 函数中。在 .js 文件的顶部我有: $(function() 并且所有的 jquery 调用都包含在

以上是关于Jquery 表单提交无法使用 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb的主要内容,如果未能解决你的问题,请参考以下文章

jquery.form.js提交 input file中的文件

jQuery Ajax 表单提交

jquerymobile怎么提交表单没有反应

使用JQuery的.ajax()提交表单后当前页面表单内容被清空,请问如何保留数据?

jQuery在使用ajax验证后提交表单

使用 javascript 没有 jQuery 的简单 ajax 表单