問題

jquery(JavaScript)を使っていて、ある箇所から動きのある挙動がすべてストップしてしまう問題に打ち当たりました。

原因

結論から言うと、Safariではsubmitするとその後の処置がストップしてしまうようです。

試行錯誤の推移

せっかくなので、その試行錯誤の中で原因がわかるまでに試した内容を備忘録として記録しておこうと思います。

`click()`と`on(click)`の違い

$('#id').click(function(){
    console.log('ボタン押しました');
});

動的に生成された要素にイベントをかける場合、on(click)を使うべきという記事を散見しました。

$('#id').on('click', function(){
    console.log('ボタン押しました');
});

動的に変化する要素へのイベントは、変化しない親の要素に仕込むと動きます。なので、さらに以下のようにする方がよいようです。

$(document).on('click','#id', function() {
    console.log('ボタン押しました');
});

構文を短縮しない

以下の記事で解説していますが、jqueryには本来の構文がありそれを短縮しても問題ないとされています。なので短縮することも多いでしょう。

bonoponz.hatenablog.com

しかし、コードをDOM対応でラップした方がいいと言う記事もみかけました。

なので、以下のように変更しました。

$(function() {
    // 処理
});

↓

$(document).ready(function(){
  jQueryの処理
});

ただ、これはしなくてもいいかもしれません。逆に短縮した、という記事もみかけたので。

ここももしかしたら影響を与えている可能性があるかもしれない、ということを頭の片隅に置いておくといいですね。

`.append()`に気を付ける

例1

.append()は、要素を単純に追加するメソッドだと思っていました。

<div class="hello">
    こんにちは
</div>

$('.hello').append('<p>こんばんは</p>');

上記のようにすると要素が追加されます。

<div class="hello">
  こんにちは
  <p>こんばんは</p>
</div>

このように使うことはもちろん可能ですが、appendする要素がもともと存在した場合に注意が必要です。

例2

<div class="div_1">
  <p class="p_1">
      test1
  </p>
  <p class="p_2">
      test2
  </p>
</div>
<div class="div_2">
  <p class="p_3">
      test3
  </p>
</div>

const p1 = $('.p_1');
$('.div_2').append(p1);

こうすると、以下のような結果になります。ただの追加ではないのがわかるでしょうか。

<div class="div_1">
  <p class="p_2">
      test2
  </p>
</div>
<div class="div_2">
  <p class="p_3">
      test3
  </p>
  <p class="p_1">
    test1
  </p>
</div>

そうです。もともとあった要素が指定した場所へ移動されました。

コピーではなく移動になります。この点を忘れないようにしましょう。

bonoponz.hatenablog.com