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

Question

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

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

<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");
  });
});

编辑：拼写和 JS 小提琴的链接：

JS Fiddle

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

Answer 1

您需要使用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() 是一个函数，因此需要括号

Answer 2

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