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而不是事件绑定。代码如下所示：

e.preventDefault()

另请注意 - {{1}}是一个函数，因此需要括号

Answer 2

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

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

2 个答案: