ajax - 使用 .on 在动态加载的表单上捕获提交

Question

我有一个通过 ajax 加载到弹出窗口中的表单。表单定义如下：

<form id="generate_form" class="form" accept-charset="UTF-8" action="/tokens/create" method="POST">

我想捕获表单提交，并使用 AJAX 提交数据。所以我添加了以下脚本：

  $(document).ready(function () {
    $(this).on('submit','#generate-form', function (e) {
      alert('trapped?');
      return false;
    });
  });

但是，当我尝试这个时，表单事件并没有被捕获，即我从来没有看到警报对话框。难道我做错了什么？

Answer 1

由于缺少 2 个右括号，您的代码可能会中断

  $(document).ready(function () {
    $(this).on('submit','#generate_form', function (e) {
      alert('trapped?');
      return false;
    }); // <-- added closing parentheses
  }); // <-- added closing parentheses

Answer 2

您拼写错误"#generate-form"（下划线而不是破折号）并忘记了一些括号：

$(document).ready(function () {
    $(this).on('submit', '#generate_form', function (e) {
        alert('trapped?');
        return false;
    });
});

Answer 3

几乎.. :{D

$('#generate_form').on('submit', function(e) {

    alert('trapped?');

    e.preventDefault();
    return false;
});

我还建议查看jQuery 的.on()文档——那里有很多有用的示例。