Javascript Jquery表单提交不使用AJAX和Rails会令人费解地重新呈现index.html.erb

我在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回购是：

嗨，我有一些建议给你： 是否将代码放入jquery的document.ready（）函数中。例如：

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

---

我认为这应该是可行的，记住“form.edit_-todo”指的是表单对象

当您动态追加表单时，提交处理程序-

$（“form.edit_-todo”）。在（“submit”…

）上不会触发，因为绑定时表单还不存在于DOM中

与您在

.ugh3

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

$（document）.on（'submit'，'form.edit_todo'，function（e）{…}）

---

文档

是一个常量-它将始终存在，因此任何事件侦听器都可以绑定到它。当触发

提交

事件时，

文档

检测到它（事件冒泡的结果），jQuery将获取目标元素（导致事件的元素）并将其与任何注册的处理程序进行比较（处理程序是在函数上与您一起创建的。$）。如果存在匹配，它将执行该处理程序。

是的，它肯定在document.ready函数中。在.js文件的顶部，我有：$（function（）{并且所有jquery调用都包含在内