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

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

Posted at May 4,2012 2:22 AM
Tag:[JavaScript, jQuery]

利用シーンはあまりないと思いますが、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を併用しない」となり、タイトルと違った結果になってしまってます。あしからず。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)