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

Question

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

我的应用程序是一个使用 Rails Controller 的单页 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 存储库是:https://github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js

Answer 1

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

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

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

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