小粋空間  -  a cheap joke and a play on words site

onclickイベントとjQueryのclickイベントを併用するときの注意

利用シーンはあまりないと思いますが、onclickイベントにjQueryのclickイベントを追加するときの注意点をまとめました。

次のようなレガシーな処理があると仮定します。

onclickイベントでsendというメソッドを呼び出し、フォームのチェック処理を行ったあとsubmit()を実行しています。

<script>
function send() {
    // 既存のチェック処理など
    document.test.submit();
}
</script>
<form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;">
<input name="foo" id="foo" type="text" value="$foo" />
<input id="bar" type="button" value="送信" onclick="send()" />
</form>

この処理に以下のようなjQueryのcilckイベント（赤色）を新たに追加した場合、先にonclickイベントが発動するため、jQueryの処理は実行されません。

<script>
$(function(){
    $('#bar').click(function(){
        $('#foo').val('');
    });
});
function send() {
    // 既存のチェック処理など
    document.test.submit();
}
</script>
<form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;">
<input name="foo" id="foo" type="text" value="$foo" />
<input id="bar" type="button" value="送信" onclick="send()" />
</form>

上記のような場合、次のようにonclickイベントを削除し、clickイベントの後で既存のメソッドを呼び出すように修正するといいようです。

<script>
$(function(){
    $('#bar').click(function(){
        $('#foo').val('');
        send();
    });
});
function send() {
    // チェック処理など
    document.test.submit();
}
</script>
<form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;">
<input name="foo" id="foo" type="text" value="$foo" />
<input id="bar" type="button" value="送信" onclick="send()" />
</form>

ということで、「onclick属性とjQueryのclickを併用しない」となり、タイトルと違った結果になってしまってます。あしからず。