作業中によくわからないことが起こったので質問させてください

以下のようなコードで入力フォームでリターンキーを押すとなぜかボタンが発火します
(console.log の内容が表示される）

$(親要素).on(event, 動的に追加される要素, コールバック);
とかくと　動的に追加される要素　の　event　がおこったときにだけ
コールバックが実行されるという認識なのですが違うのでしょうか

全く別の要素の別のイベントで発火するのはなぜでしょうか

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js" data-turbolinks-eval=false></script>
  <script>
$(function() {
  $(document).on('click', 'button', function(e) {
    console.log('#button');
    return false;
  });
});
  </script>
</head>
<body>
  <form>
    <button>選択</button>
    <input type="text">
  </form>
</body>
</html>

行動規範の内容に同意します

回答3件

ベストアンサー

動的に追加される要素　の　event　がおこったときにだけ

コールバックが実行されるという認識なのですが違うのでしょうか

それは合っています。ただ、<input>1つ、送信ボタン1つというフォームがあった場合に、<input>内でEnterを打つと、送信の動作だと認識することがあります（参考）。

外したい場合は、<input>のonkeydownで、入力されたキーがEnterだったらpreventDefaultする、というような方法が考えられます。

投稿2019/05/24 04:45

maisumakun

総合スコア145183

yambejp

2019/05/24 04:48

ああ、inputのエンターの件ですね、失念してました

maisumakun

2019/05/24 04:51

参考URLのところに詳細が書いてありましたが、「ボタンを押した」として認識されるのは今回はじめて知りました。

退会済みユーザー

2019/05/24 04:58 編集

そんな動作があるのですね… エンター時にサブミットはしたいのですがサブミットボタンに設定してるJSが動いては困る状況だったのでサブミットボタンをつけずに、サブミットボタン側も type=button にしてJSで submit することにします本当に助かりました

行動規範の内容に同意します

リターンキーではなくエンターキーだと思いますが、この動作は HTML 仕様の Implicit submission (暗黙的な送信)に書かれています。
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

(和訳)
フォーム要素のデフォルトボタンは、そのフォームのツリー順で最初の送信ボタンです。

ユーザーエージェントが、フォームの暗黙的な送信をサポートしている場合(たとえば、テキストコントロールにフォーカスがあるときに "Enter" キーを押すとフォームが暗黙的に送信されるなど)、デフォルトボタンが無効になっていない場合、ユーザーエージェントはそのデフォルトボタンでクリックイベントを発生させる必要があります。

提示コードの場合送信ボタンが一つしかないため、これが対象になります。

HTML
1<button type="submit" id="select_all">選択</button>

投稿2019/05/24 05:11

x_x

総合スコア13749

$(親要素).on(event, 動的に追加される要素, コールバック);

とかくと　動的に追加される要素　の　event　がおこったときにだけ
コールバックが実行されるという認識なのですが違うのでしょうか

正確には動的に追加されたものを含めた子要素
別に静的な要素でもヒットします

全く別の要素の別のイベントで発火するのはなぜでしょうか

別に発火しないと思いますけどね・・・
具体的にはどこの何が発火するのでしょうか？

enter対策

javascript
1<script>
2$(function() {
3  $('#userlist').on('click', '#select_all', function(e) {
4    e.preventDefault();
5    console.log($(this).attr("id"));
6  });
7  $('#userlist input').on('keydown',function(e) {
8    if(e.keyCode=="13"){
9      console.log("enter");
10      e.preventDefault();
11    }
12  });
13});
14</script>
15<div id="userlist">
16<form>
17<button type="submit" id="select_all">選択</button>
18<input type="text">
19</form>
20</div>

投稿2019/05/24 04:43

編集2019/05/24 04:53

yambejp

総合スコア114769

退会済みユーザー

2019/05/24 04:47

＞別に発火しないと思いますけどね・・・自分の環境だと↑のコードを適当な HTML ファイルにコピーして Chrome で開いて入力のほうにフォーカスをあててエンターキーを押すとコンソールに #select all という文字が出るんですけど他の環境だとでないんでしょうか <input>を操作してるだけなのに<button>の方が発火しているように見えます

yambejp

2019/05/24 04:54 編集

maisumakunさんの回答の通り、formのテキストボックス内でエンターを押すとサブミットが走るので、サブミットボタンを押す作業をエミュレートしてくれます便利なのか不便なのか、ちょっと微妙ですけどね。気に入らない場合はinputのkeydownでe.keycodeをつかってエンターを弾くのが妥当でしょう(sampleあげときました)

退会済みユーザー

2019/05/24 06:02

ありがとうございます

行動規範の内容に同意します

あなたの回答