JavaScript ボタンクリックイベント時ソースコード 不明点を明らかにしたい

Question

よろしくお願いいたします。

まず、曖昧な質問になってしまいますことをお詫びします。
ただ解決ができず、何かのとっかかりになればとこちらに書き込ませていただきました。

機器管理システムを、webアプリとして作っており、下記ソースはそのenentlisnerの部分です。
編集ボタンのイベントです。

下記のソースコードですが、おかしい所があるとの事です。

JavaScriptとGroovy は現在まったく勉強したことが無く、ネットで調べたのですが
（調べたキーワードはonsubmitや、editable。また、JavaScriptの構文など）
よくわかりません。

現在使用中の開発環境ではコンパイルがかけられず、おかしいといわれる箇所がわからない為
有職者の方、何か気づかれる事がございましたらご教示いただけませんか。

※￥マークはバックスラッシュを意味しています。

// -------------------------------------------------------------------------
// ※独自開発環境のの汎用カスタマイズでは、ScriptSection に埋め込む JavaScript は、ドル記号を
//   バックスラッシュでエスケープする必要があります。
//    コメントにドル記号を記述した場合もエスケープしないとエラーになります。
//   (汎用カスタマイズでは、jsp への展開の前に Groovy の処理系を通過しますが、
//    Groovy の処理系がドル記号を Groovy 式の始まりと認識するため、エスケープしないと
//    Groovy の処理系で Groovy 構文と認識されてしまいます。)
// -------------------------------------------------------------------------
// 変更のボタン処理
// -------------------------------------------------------------------------

// 編集
function henshu_onclick() {
    var result = (\$("input[name='is_editable']").val() == "1");
    if (!result) {
        alert("データは処理できません。");
    }

    return(result);
}

// 編集ボタン 上下に 2 つあり
jQuery(function(\$) {
    \$(function() {
        // 当初、ボタンの属性を変更しようとしてましたが、IE8だとエラーになるので
        // form に onsubmit 属性を付与することにしました
        var \$form = \$("#detailForm");
        \$form.attr("onsubmit", "return(henshu_onclick());");
    });
});
</script>

Answer 1

そもそも、なぜおかしいことがあると思ったんですか？
エラーになったとかですかね？
そうすると、エラーの内容を記載すると、回答者のみなさんも助かると思います。

ざっと見た感じ特別ここがダメだ！というところはないようも見えるのですが、
書き直すとしたら、以下のような感じでしょうか。

jQuery(function(\$) {
    \$("#detailForm").on("submit", henshu_onclick);
});

Comments

[nekomura]

root_jp様
曖昧な質問にお答え頂き感謝です。
ありがとうございます。

文法的に、on("submit", henshu_onclick);
});
onは外に出した方がよいという事でしょうか？

本コードの製作者が現在不在の為、おかしい箇所があるとの指示のみで、
理由は現在わかっていません。
このご回答を元に試行錯誤してみますので、また追記など載せたいと思います。

本当にありがとうございました。

[nekomura]

root_jp様
たびたびのコメントで申し訳ありません。
もし、可能であれば追加でご教示いただきたいのですが、
本コードから、root_jp様の直したコードに変えることによる変化…といいますか、
違いを教えていただければ幸いです。

[tkturbo]

横からですが。
「.attr("onsubmit", "return(henshu_onclick());");」←これではhtmlの属性値を追加するだけで、EventListenerへの登録はできないようです。
EventListenerへの登録にはやはり「.on("submit", henshu_onclick);」の記述が必要なようです。

[nekomura]

tkturbo様！
いつもお世話になっております。
そうなんですね、ありがとうございます！
勉強になります。

[nekomura]

root_jp様
tkturbo様

五月雨式の質問で申し訳ありません。
「.on("submit", henshu_onclick);」
とする場合、
attrはどうなるのか（不要なのかどうか）を、教えていただけないでしょうか。。。。
よろしくお願いいたします。

[tkturbo]

> nekomuraさん
すみません、先ほどの「←これではhtmlの属性値を追加するだけで」のくだりは誤りでした。(.attr(name, value)のvalueへのセットの仕方を間違って確認してましたorz)
「attrはどうなるのか（不要なのかどうか）」←そのままでも大丈夫でしょうが、「EventHandlerを使用している」というのが明示的にわかるので、「.on(eventName, function)」のほうがいいと思います。

[root_jp]

>文法的に、on("submit", henshu_onclick);
>});
>onは外に出した方がよいという事でしょうか？

文法的に外に出すというよりも、
onというfunctionの引数にイベント名を書いています。

http://www.jquerystudy.info/reference/events/on.html
この辺りご参考ください。

>変えることによる変化…といいますか、
>違いを教えていただければ幸いです。

動きとしての変化はないと思いますが、まず
jQuery(function(\$) {
\$(function() {

}
}

これは無駄です。同じことを２回しています。
個人的に書き方として、jQuery(fuction) の方が好みですので
外側だけ残しました。

attr と on の違いですが、例えば
\$form.attr("onsubmit", func1);
\$form.attr("onsubmit", func2);
と２行書くと、起動されるのは func2 だけになってしまいますが

\$form.on("submit", func1);
\$form.on("submit", func2);
と書くと、func1, func2 の順序で2つとも呼ばれます。
処理を追加していけます。
イベントリスナーという仕組みです。

どちらでもいいんですが、後々の事を考えると、
イベントリスナーにしておいたほうが、色々と融通がきく感じですかね。

>「.on("submit", henshu_onclick);」とする場合、attrはどうなるのか

不要です。
まるっと置き換えてもらって大丈夫です。

>本コードの製作者が現在不在の為、おかしい箇所があるとの指示のみ

おかしい箇所があると指示を出している人に、
何がどうおかしいのかを、聞いた方がいいと思いますよ。
丸投げも甚だしいかとｗ

[nekomura]

root_jp様
※先ほど投稿した内容を変更しています。
私の勘違いがあったため。

大変丁寧でわかりやすいご回答に、本当に感謝しています。
とても勉強になりますし、例や参考URLもあってとても助かります。
本当にありがとうございます。
初心者の私にもわかりやすく、まさにこういったご回答を求めていました。

＞おかしい箇所があると指示を出している人に、
＞何がどうおかしいのかを、聞いた方がいいと思いますよ。
そうですよね…ただ、その者が現在不在で、聞けずじまいです。。。
ご迷惑おかけしてすみません。

またの機会に何かご教示いただければ幸甚です。

[nekomura]

tkturbo様
＞「attrはどうなるのか（不要なのかどうか）」←そのままでも大丈夫でしょうが、「EventHandlerを使用している」というのが明示的にわかるので、「.on(eventName, function)」のほうがいいと思います。
なるほど～。。。
理由付けがわかると、頭に入りやすいです。
とても勉強になりました。
いつもありがとうございます＾＾！