フォーム送信イベントをキャプチャしようとしましたが、再度キャプチャしません。

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

電卓はうまく動作し、新しい価値は入力に大きく表示されます。私の問題は、submitボタンの値が変更されていないことと、submitボタンが.readyクラスを取得した後も計算を実行し続けることです。私は、私のjqueryのnot :(。ready）セレクタを使ってこれを修正すると思ったが、そうではない。何かご意見は？ありがとうございました！

Answer 1

イベントバインディングではなくevent delegationを使用する必要があります。 e.preventDefault()機能であるため、括弧を必要と

Answer 2

最初に選択して、見つかった要素に関数をバインドします。セレクタによって検出されたオブジェクトのリストは、後で変更されません。要素とイベントごとに1回のみイベントハンドラを実行する場合は、jQuery.oneを試してください。