jquery - try catch 表单提交事件，然后不再捕获它

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 fiddle 的链接:

JS Fiddle

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

Answer 1

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

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