Javascriptを/ jQueryのコードは、第二に二回、最初のイベントに一度実行され、その

Question

に私は、これはHTMLボタンに結び付け機能をJS持っonclick属性：

function AddFbLikes() { 
$('#fbform').on('submit', function(e) { 
    e.preventDefault(); // prevent form submission 
    $("input:checkbox:checked").each(function(idx, val){ 
     callResult(val.value); 
    }); 
})} 

私は条件に一致する4つのinputの要素を持っていると仮定すると、 HTMLに4つの要素が追加されます（これはcallResult()の機能です）。しかし、私がもう一度ボタンをクリックすると、私は8回以上を取得し、3回クリックすると12回以上を取得します。

これをデバッグしようとしましたが、それは分かりません。私はPython/Djangoから来ているので、Javascriptで取得できないものがあるはずです。

Answer 1

あなたの関数AddFbLikesは、呼び出されるたびに$('#fbform')で見つかったすべての要素に対して別のイベントリスナーを追加します。だからこそ、それが見つけた4つの要素に対して4つの要素から始まり、毎回4つずつ成長します。そこにコードを構造化するためのより良い方法は、おそらくですが、あなたが私たちに与えてくれたものを考慮すると、（http://api.jquery.com/one/）の代わりにonのoneを試してみてください。

function AddFbLikes() { 
    $('#fbform').one('submit', function(e) { 
     e.preventDefault(); // prevent form submission 
     $("input:checkbox:checked").each(function(idx, val){ 
      callResult(val.value); 
     }); 
    } 
)} 

Answer 2

ユーザーがクリックしたときにあなたは、イベントハンドラをバインドするべきではありませんボタン。そのたびに追加のハンドラが追加され、イベントが発生するとカスケードされます。ボックスにチェックを入れてください。あなたがボタンをクリックすると、（デフォルトはtype="submit"ある）type="button"に変更し提出されることからフォームを防止するために

function AddFbLikes() { 
    $("input:checkbox:checked").each(function(idx, val){ 
     callResult(val.value); 
    }); 
} 

。

<button type="button" id="submit_facebook" onclick="AddFbLikes()" class="btn-primary img-rounded">add selected artists</button> 

通常、あるイベントハンドラを別のイベントハンドラにバインドすることは稀です。最初のイベントが発生したときに2番目のイベントハンドラが条件付きであっても、それに対処するより良い方法は、最初のイベントハンドラに2番目のハンドラがチェックする変数を設定させることです。

Answer 3

ボタンのインラインJavaScriptを取り除き、邪魔にならないようにします。これにより、フォーム送信ハンドラが一度だけ追加されるようになります。

$('#submit_facebook').on('click', function({ 
    //Attach the handler for form submit 
    $('#fbform').on('submit', function(e) { 
     e.preventDefault(); // prevent form submission 
     $("input:checkbox:checked").each(function(idx, val){ 
      callResult(val.value); 
     }); 
    })}  
    //Detatch the event handler for the button click 
    $('#submit_facebook').off('click'); 
}); 

ボタンのHTMLは以下のようになります。AddFbLikes関数を呼び出すために使用されている他のどのようなコード

<button id="submit_facebook" class="btn-primary img-rounded">add selected artists</button>