在jQuery动态添加到DOM

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() 
})

此事件委派是 NOT 捕获表单，因为我可以在控制台中看到启用保留日志

Answer 1

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

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

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

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