外部JavaScriptファイルでformをsubmitする場合の注意 submitが複数回実行される

submit.js

$(function() {
    var btn = $('.btn');
    btn.click(function(){
        $(this).parents('form:first').submit();
        alert('call alert');
    });
});

test.html

<script type="text/javascript" src="jquery.js"></script> 
<!-- 同じ外部JavaScriptファイルを2回呼び出す -->
<script type="text/javascript" src="alert.js"></script>
<script type="text/javascript" src="alert.js"></script>
<form name="form1" action="test2.html" method="post">
    <input class="btn" type="button" value="送信">
</form>

IE8、Google Chrome3.0

  1. alert.js は2回読み込まれる
  2. submit は2回実行される
  3. alert は2回実行される

FireFox3.5

  1. alert.js は2回読み込まれる
  2. submit は1回だけ実行される
  3. alert は1回だけ実行される

まとめ

ブラウザごとに挙動が変わるのでページ内で同じ外部JavaScriptファイルの読み込みが複数回おこないわないように注意する