我在 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 repo 是:https : //github.com/jwolfe890/todoapp/blob/master/app/assets/javascripts/todo.js
当您动态附加表单时,提交处理程序 - $("form.edit_todo").on("submit", ...
- 不会触发,因为在绑定时该表单尚不存在于 DOM 中。
与您在.ugh3
类上使用的点击事件类似,您需要针对文档注册提交事件:
$(document).on('submit', 'form.edit_todo', function (e) { ... })
该document
是一个常数-它会一直存在,因此任何事件侦听器可以针对它的约束。当一个submit
事件被触发时,它document
会检测到它(事件冒泡的结果),jQuery 将获取目标元素(导致事件的元素)并将其与任何注册的处理程序(处理程序由您的$.on
函数创建)进行比较。如果有匹配项,它将执行该处理程序。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句