jquery - 当表单被动态添加到 DOM 时，检测 jQuery 中的表单提交

Question

场景:

我有一个选择框，其中的数据由 php 配置文件中的数据填充。如果选择中没有匹配的值可供选择，我将允许用户向其中添加一个字段。我创建了一个小的输入表单，它是通过 jQuery 添加的，我想捕获帖子提交，然后将其推迟到 ajax 函数。

问题:

由于表单是动态添加的，我无法捕获表单提交，并且页面最终会重新加载。

这不起作用:

$('form[name="add"]').on('submit', function(e) {.....

一个解决方案:

如果我不使用表单元素并在 div 中模拟它，我可以使用

$(document).on('click', 'div.add_form a[name="submit"]', function() {.....

但是:

虽然上面的解决方案有效，但如果 1)有人可以教育我是否可以从使用 jQuery 动态添加到页面的表单中捕获提交，以及 2)如果这是“良好实践”，我将不胜感激' 使用该方法

更新

$(document).on('submit', 'form[name="add"]', function(e){ 
    console.log('here')
    e.preventDefault() 
})

此事件委托(delegate)未捕获表单，正如我在启用保留日志的控制台中看到的那样

Answer 1

可以使用以下方法将动态添加的元素绑定(bind)到事件。看看什么 Event Delegation是。

$(document).on('click', 'div.add_form a[name="submit"]', function(){
    //your code
})

同样的原则适用于动态添加的表单。将事件更改为“提交”并使用对动态添加的表单也有效的选择器。

$(document).on('submit', '[selector-for-your-form]', function(){
    //your code
})