Javascript 防止提交通过ajax加载的表单

我有一个jqueryajax调用，它在div中加载一个表单，我想阻止提交这个表单，但是如果我使用jquery提交函数

$("form").submit(function(e){
  e.preventDefault(e);
  alert('submit intercept');
});

如果我放置在外部js文件中，它不起作用，但如果我在通过ajax调用加载的表单后放置脚本标记，它就起作用。

您可以对动态生成的元素使用

$（文档）

选择器和

on（）

方法：

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
    alert('submit intercept');
});

---

您不需要使用submit

相反，您可以尝试以下方法：

$('#submit-button').on('click', function() {
    var userId = $('#user-id').val();
    var content = $('#content').val();
    $.ajax({
        type : 'post', 
        url :'url',
        processData : false,
        cache : false,
        contentType : false,
        data : {
            'userId' : userId,
            'content' : content
        },
        dataType : 'json',
        success:function(result){
            alert('success!');
            var userId = $('#user-id').empty();
            var content = $('#content').empty();
        },
        error:function(e){
            console.log(JSON.stringify(e));
        }
    });
});

---

但是，您不再需要“表单”标签。因为如果提交它，页面会发生更改，如果要使用异步的ajax，则不应更改页面。

是的，您只能将事件侦听器附加到现有元素。“事件委派”是搜索时的关键词…这很好用，谢谢。很高兴能帮助您我不能修改表单，因为它是CMS的一部分。如果可能，您应该始终连接到提交事件。它在语义上更好。您还应该始终使用

表单

元素，即使在发出AJAX请求时也是如此，因为出于可访问性的原因，这是必不可少的。