jQuery UIのSortableを用い、li要素並び替え後にも要素の情報を取得したい

前提

　現在Webaアプリケーションを作成しながらプログラミングの学習をしているものです。
jQueryのSortableを使用して、li要素の並び替えを行なっております。
下記のソースコードは、要素をドラッグして任意に並び替えた後、要素クリックでコンソールに、innerHTMLを出力するコードになります。
しかし、要素を並び替えた後、クリックすると違う要素の情報が取得されてしまいます。どのような実装をすれば良いかご教授いただければ幸いです。

実現したいこと

liタグの要素を並び替え後、クリックで各要素の情報を正しく取得できるようにしたい

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>サンプル Sortable</title>
    <!-- jQuery、jQuery UIの読み込み -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!-- Sortableの実装 -->
    <body>
      <!-- リストにid属性を追加 -->
      <ul id="sortable">
        <li class="liClass" id="1">項目1</li>
        <li class="liClass" id="2">項目2</li>
        <li class="liClass" id="3">項目3</li>
        <li class="liClass" id="4">項目4</li>
        <li class="liClass" id="5">項目5</li>
      </ul>
      <p>リストの順番は「<span id="log"></span>」です</p>
    </body>
    <script>
      $(function () {
        // リストを並べ替え可能に
        $('#sortable').sortable({
          // updateで並べ替えるたびに更新
          update: function () {
            // toArrayで現在の順番を取得し出力
            $('#log').text($('#sortable').sortable('toArray'));
          },
        });
      });
      window.addEventListener('load', function () {
        let sortable = document.getElementById('sortable');
        let liClass = document.getElementsByClassName('liClass');

        for (let i = 0; i < liClass.length; i++) {
          liClass[i].addEventListener('click', function (e) {
            console.log(`${liClass[i].innerHTML}`);
          });
        }
      });
    </script>
  </head>
</html>

試したこと

for文はページを開いた一度目しか実行されないため、要素の順番が変わるとそこに誤差が生じているのだと思いますが、上記のソースコード以外での実装が調べても見当つかない状態です。

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

回答1件

ベストアンサー

こうするとよいでしょう：

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1" />
6  <title>サンプル Sortable</title>
7  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
8  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
9  <script>
10    $(function () {
11      // sortable 設定
12      $('#sortable').sortable({
13        update: function () {
14          $('#log').text($(this).sortable('toArray'));
15        },
16      });
17      // リストアイテムにクリックハンドラ設定
18      $('.liClass').on('click', function() {
19        console.log($(this).html());
20      });
21    });
22  </script>
23</head>
24<body>
25<ul id="sortable">
26  <li class="liClass" id="1">項目1</li>
27  <li class="liClass" id="2">項目2</li>
28  <li class="liClass" id="3">項目3</li>
29  <li class="liClass" id="4">項目4</li>
30  <li class="liClass" id="5">項目5</li>
31</ul>
32<p>リストの順番は「<span id="log"></span>」です</p>
33</body>
34</html>
35