尝试捕获表单提交事件，然后不再捕获它

Question

编辑：@mhodges 回答了问题。 Jsfiddle 已更新。谢谢！

我正在设置一个 calculator/donation 表格。表单很简单：输入一个数字，然后提交按钮执行计算并获得一个新值，此时我希望它 link 到捐赠页面。这是一些示例代码：

<form id = "donation" action = "donation/page">
  <input id = "firstNumber" placeholder = "400.00">
  <input type = "submit" id = "submit" value = "Calculate Number">
</form>

这是 jquery 我有运行它：

$(document).ready(function(){
  $("#donation:not(.ready)").submit(function(e){
    e.preventDefault;
    var amount = $("#firstNumber").val() / 5;
    $("#firstNumber").val(amount);
    $("#submit").val("Donate Now!");
    $("#donation").addClass("ready");
  });
});

编辑：拼写和 link 到 JS fiddle：

JS Fiddle

所以计算器工作得很好，新值在输入中显示得很好。我的问题是提交按钮的值没有改变，即使在获得 .ready class 之后提交按钮继续执行计算。我认为在 jquery 中使用 not:(.ready) 选择器可以解决这个问题，但事实并非如此。有什么想法吗？谢谢！

Answer 1

您首先选择，然后将您的函数绑定到找到的元素。选择器找到的对象列表以后不会更改。如果您只想对每个元素和事件执行一次事件处理程序，请尝试 jQuery.one.

Answer 2

您需要使用 event delegation 而不是事件绑定。代码如下所示：

$(document).ready(function(){
  $(document).on("submit", "#donation:not(.ready)", function(e){
    e.preventDefault();
    var amount = $("#firstNumber").val() / 5;
    $("#firstNumber").val(amount);
    $("#submit").val("Donate Now!");
    $("#donation").addClass("ready");
  });
});

另请注意 - e.preventDefault() 是一个函数，因此需要括号

尝试捕获表单提交事件，然后不再捕获它

Trying to capture a form submit event, then not capture it again

forms

jquery

calculator

submit