Jquery 表单提交不适用于 AJAX 和 Rails 莫名其妙地重新渲染 index.html.erb

Question

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

我的应用程序是一个使用 Rails 控制器的单页 TODO 应用程序，但所有 DOM 更改都通过 Jquery/Ajax 进行。通过 Javascript 将 TODO 渲染到页面后，每个 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 存储库是：https://github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js

Answer 1

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

与在.ugh3类上使用的单击事件类似，您需要针对文档注册提交事件：

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

document是一个常量 - 它将始终存在，因此任何事件侦听器都可以绑定它。当触发submit事件时，document检测到它(事件冒泡的结果(，jQuery将获取目标元素(导致事件的元素(并将其与任何注册的处理程序进行比较(处理程序是使用$.on函数创建的(。如果存在匹配项，它将执行该处理程序。

Answer 2

嗨，我有一些建议给你： 你是否把代码放在jquery的document.ready((函数中。如下所示：

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

我认为这应该有效，请记住"form.edit_todo"指的是表单对象